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)

　　})

　　})