动态路由

对路由的添加通常是通过 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