1. 动态路由配置的应用场景
一般我们在使用vue-router进行路由管理的时候，是通过如下方式配置路由与组件之间的映射关系:
// router/index.js配置文件
const router = new VueRouter({
routes:[
{
path:'/login',
component:()=>import ('../views/Login') //登录路由
},
{
path:'/reg',
component:()=>import ('../views/Reg') //注册路由
},
{
path:'/admin',
component:()=>import ('../views/Admin') //这是一个管理员才能访问的路由
},
{
path:'/vip',
component:()=>import ('../views/Vip') //假设，这是要给vip用户才能访问的路由
},
]
})
但是在后台管理平台这种类型的项目中，我们需要让拥有不同角色权限的用户，访问不同的菜单及路由，如上述代码所示，部分路由只有管理员才能访问，而另外一部分路由只能vip用户才能访问，所以需要用到vue-router提供的addRoute方法来动态管理这一部分路由配置。
2. 本地只配置通用路由
我们为了实现路由的动态配置，需要将上述路由配置进行拆分，本地配置文件中，只保留通用的路由映射。
const router = new VueRouter({
routes:[
{
path:'/login',
component:()=>import ('../views/Login') //登录路由
},
{
path:'/reg',
component:()=>import ('../views/Reg') //注册路由
}
]
})
3. 后端为每个用户分配一个角色，随登录接口下发给前端
4. app.get('/login',(req,res)=>{
5. //此处需要实现登录相关逻辑
6. res.send({
7. username:'张三丰',
8. role:'admin', //标志当前用户角色
9. routerList:[ //此处的路由配置，也可以通过独立接口向前端提供
10. {
11. path:'/admin',
12. component:()=>import ('../views/Admin') //这是一个管理员才能访问的路由
13. },
14. ...此处可能会有很多其他路由，这些路由数据应该由专门的数据表来存储
15. ]
16. })
17. })
4、前端登录并动态获取路由配置
前端登录成功后，会得到后端动态下发的，跟自己账号角色相匹配的路由数据，此时可以通过addRoute方法，将这些动态获取的路由配置数据包，设置给router对象
// views/Login.vue 登录面板
axios.get('/login',(result)=>{
let {routerList} = result
routerList.forEach((item) => {
this.$router.addRoute(item)
})
})
京公网安备 11010802030320号