在vue项目中怎么动态添加子路由

Question

• 在实际开发中会涉及到权限控制
• 怎么动态的添加子路由，addRoutes能实现吗

Answer 1

• 首先，你说的权限控制，实际开发肯定是会涉及到的，举个栗子，你开发一个商城项目，用户没登录，是不是不能查看个人中心相关的页面？这就是最简单的一个权限控制。
• 然后你说的动态添加子路由，不是你想的那样直接添加到vue-router对象里面，而是像这样

const User = {
  template: '<div>User</div>'
}

const router = new VueRouter({
  routes: [
    // 动态路径参数 以冒号开头
    { path: '/user/:id', component: User }
  ]
})

用动态参数来控制的。出自官网

Answer 2

你大概是想知道前端鉴权这个功能怎么实现吧，实际上路由表都是定义好的，挂在状态树上实时添加，没有权限就不添加这条路由，权限和具体菜单目录都需要从后端接口获取数据，你可以看看这篇文章
https://www.jianshu.com/p/3ea...

Answer 3

也可以用 beforeEach 和afterEach

官方文档

Answer 4

给你提供一个思路参考：你根本不需要动态添加路由，所有路由都添加好，展示菜单用接口用后端拿就ok了

Answer 5

通过 vm.$router.options.routes 得到已有路由的配置数组. 再对数组操作找到要添加子路由的对应配置项 (假设命名为: mainRoute).

let children = mainRoute.children || [];
children.push({
    path: xxx,
    name: xxx,
    component: xxx
});

mainRoute.children = children;
vm.$router.addRoutes([mainRoute]);