vue动态路由实现

动态路由的实现方式

Vue的动态路由主要通过vue-router实现，核心是利用addRoute方法动态添加路由规则，或在路由配置中使用参数占位符（如:id）实现路径匹配。

基础动态路由配置

在路由配置文件中定义带参数的路径：

const routes = [
  {
    path: '/user/:id',
    component: User,
    props: true // 将参数作为props传递
  }
]

组件中通过$route.params.id或props接收参数：

export default {
  props: ['id'],
  mounted() {
    console.log(this.id); // 通过props获取
    console.log(this.$route.params.id); // 通过路由对象获取
  }
}

编程式动态添加路由

通过router.addRoute()在运行时添加新路由：

// 添加单个路由
router.addRoute({
  path: '/new-route',
  component: NewComponent
});

// 添加嵌套路由
router.addRoute('parentRoute', {
  path: 'child',
  component: ChildComponent
});

路由权限控制示例

结合权限验证动态生成路由：

// 模拟权限数据
const userPermissions = ['dashboard', 'settings'];

const dynamicRoutes = userPermissions.map(permission => ({
  path: `/${permission}`,
  component: () => import(`@/views/${permission}.vue`)
}));

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

路由懒加载优化

动态导入组件提升性能：

const routes = [
  {
    path: '/admin',
    component: () => import('./views/Admin.vue')
  }
]

注意事项

1. 动态路由添加后需手动导航到新路由，或使用router.replace()更新当前路由
2. 服务端渲染（SSR）场景需特殊处理动态路由
3. 路由守卫中处理动态路由时注意执行顺序
4. 通过router.hasRoute()检查路由是否存在
5. 使用router.removeRoute()删除已添加的路由

完整示例代码

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

const router = createRouter({
  history: createWebHistory(),
  routes: [
    { path: '/', component: Home }
  ]
});

// 动态加载模块
function loadModuleRoutes() {
  const modules = import.meta.glob('./modules/*.js');
  Object.values(modules).forEach(async module => {
    const routeConfig = await module();
    router.addRoute(routeConfig.default);
  });
}

export { router, loadModuleRoutes };