【vue】动态更新路由

nodejs：14.19.1
vue：2.5.2

动态更新路由的常见场景是在用户登录后根据其角色或权限加载不同的路由。这可以通过在 Vuex store 中存储用户的权限信息，然后在应用启动时或用户登录后动态地添加这些路由。

安装Vue Router

npm install vue-router

一、Vue Router 3中实现动态更新路由

vue-router：3.0.1

1、在你的 router/index.js 文件中，定义一些基础路由，并保持路由数组开放以便添加更多路由：

import Vue from 'vue';
import Router from 'vue-router';

Vue.use(Router);

const routes = [
  { path: '/', component: HomeComponent }, // 基础路由
  // 其他基础路由...
];

export default new Router({
  routes
});

2、当需要动态添加路由时，例如在用户登录后，你可以从服务器获取路由配置，并使用 router.addRoute 添加它们：

import router from '@/router';

const dynamicRoutes = [
  { path: '/admin', component: AdminComponent }, // 动态路由
  // 其他动态路由...
];

dynamicRoutes.forEach(route => {
  router.addRoute(route);
});

二、Vue Router 4中实现动态更新路由

vue-router：4.0.13

1、 在 Vue Router 4 中，你不能再使用 addRoute 或 addRoutes 方法，因为它们已经被移除。在 Vue Router 4 中，你应该在初始化时就定义所有可能的路由，并使用路由懒加载和动态导入来实现类似的功能：

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

const routes = [
  { path: '/', component: () => import('@/views/Home.vue') },
  // 动态路由可以在这里定义
];

const router = createRouter({
  history: createWebHistory(),
  routes,
});

export default router;

2、然后，你可以在运行时根据需要动态导入组件：

if (isLoggedIn) {
  routes.push({ path: '/admin', component: () => import('@/views/Admin.vue') });
}

备注：这样实现动态路由的更新意味着需要在应用启动时就准备好所有可能的路由配置。

备注：在 Vue.js 2 中，如果你需要动态地添加或更新路由，通常你会使用 router.addRoutes 或 router.addRoute 方法。但是需要注意的是，在 Vue Router 3 中，router.addRoutes 已被弃用，取而代之的是 router.addRoute。然而，在 Vue Router 4 中，这两个方法都被移除了，因此下面的示例适用于 Vue Router 3。