动态路由

对路由的添加通常是通过 routes 选项来完成的，但是在某些情况下，你可能想在应用程序已经运行的时候添加或删除路由

添加路由

用 router.addRoute() 新增加路由配置

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

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

router.addRoute({
  path: '/about1',
  name: 'about1',
  component: () => import('../views/about/about1.vue'),
})

export default router

访问：http://localhost:5173/about1

添加多个路由

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

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

const currentRouter = [
  {
    path: '/about1',
    name: 'about1',
    component: () => import('../views/about/about1.vue'),
  },
  {
    path: '/about2',
    name: 'about2',
    component: () => import('../views/about/about2.vue'),
  },
]

for (let i = 0; i < currentRouter.length; i++) {
  router.addRoute(currentRouter[i])
}

export default router

访问：http://localhost:5173/about1

访问：http://localhost:5173/about2

添加嵌套路由

要将嵌套路由添加到现有的路由中，可以将路由的 name 作为第一个参数

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

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

router.addRoute('about', {
  path: 'about1',
  name: 'about1',
  component: () => import('../views/about/about1.vue'),
})

export default router

访问：http://localhost:5173/about/about1

删除路由

通过路由名字进行删除

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

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

router.removeRoute('about')

export default router

访问：http://localhost:5173/about
至此，本章节的学习就到此结束了，如有疑惑，可对接技术客服进行相关咨询。