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)

　　})

　　})