别名、重定向和命名路由

别名

有时候，用户访问/和/home都应该跳转到home页面，此时可用路由别名来实现

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      alias: 'home',
      component: () => import('../views/home/home.vue'),
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/about/about.vue'),
    },
  ],
})

export default router

重定向

有时用户想访问about页面时直接看到about1页面的内容

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      component: () => import('../views/home/home.vue'),
    },
    {
      path: '/about',
      name: 'about',
      redirect: '/about/about1',
      component: () => import('../views/about/about.vue'),
      children: [
        {
          path: 'about1',
          name: 'about1',
          component: () => import('../views/about/about1.vue'),
        },
        {
          path: 'about2',
          name: 'about2',
          component: () => import('../views/about/about2.vue'),
        },
      ],
    },
  ],
})

export default router

命名路由

import { createRouter, createWebHistory } from 'vue-router'

const router = createRouter({
  history: createWebHistory(import.meta.env.BASE_URL),
  routes: [
    {
      path: '/',
      name: 'home',
      alias: 'home',
      component: () => import('../views/home/home.vue'),
    },
    {
      path: '/about',
      name: 'about',
      component: () => import('../views/about/about.vue'),
    },
  ],
})

export default router

之后就可以通过路由名字进行跳转了

router.push({
  name: 'about',
})

<router-link :to="{ name: 'about' }">跳转到about</router-link>

至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。