1. 動(dòng)態(tài)路由配置的應(yīng)用場(chǎng)景

　　一般我們?cè)谑褂胿ue-router進(jìn)行路由管理的時(shí)候，是通過如下方式配置路由與組件之間的映射關(guān)系:

　　// router/index.js配置文件

　　const router = new VueRouter({

　　routes:[

　　{

　　path:'/login',

　　component:()=>import ('../views/Login') //登錄路由

　　},

　　{

　　path:'/reg',

　　component:()=>import ('../views/Reg') //注冊(cè)路由

　　},

　　{

　　path:'/admin',

　　component:()=>import ('../views/Admin') //這是一個(gè)管理員才能訪問的路由

　　},

　　{

　　path:'/vip',

　　component:()=>import ('../views/Vip') //假設(shè)，這是要給vip用戶才能訪問的路由

　　},

　　]

　　})

　　但是在后臺(tái)管理平臺(tái)這種類型的項(xiàng)目中，我們需要讓擁有不同角色權(quán)限的用戶，訪問不同的菜單及路由，如上述代碼所示，部分路由只有管理員才能訪問，而另外一部分路由只能vip用戶才能訪問，所以需要用到vue-router提供的addRoute方法來動(dòng)態(tài)管理這一部分路由配置。

　　2. 本地只配置通用路由

　　我們?yōu)榱藢?shí)現(xiàn)路由的動(dòng)態(tài)配置，需要將上述路由配置進(jìn)行拆分，本地配置文件中，只保留通用的路由映射。

　　const router = new VueRouter({

　　routes:[

　　{

　　path:'/login',

　　component:()=>import ('../views/Login') //登錄路由

　　},

　　{

　　path:'/reg',

　　component:()=>import ('../views/Reg') //注冊(cè)路由

　　}

　　]

　　})

　　3. 后端為每個(gè)用戶分配一個(gè)角色，隨登錄接口下發(fā)給前端

　　4. app.get('/login',(req,res)=>{

　　5. //此處需要實(shí)現(xiàn)登錄相關(guān)邏輯

　　6. res.send({

　　7. username:'張三豐',

　　8. role:'admin', //標(biāo)志當(dāng)前用戶角色

　　9. routerList:[ //此處的路由配置，也可以通過獨(dú)立接口向前端提供

　　10. {

　　11. path:'/admin',

　　12. component:()=>import ('../views/Admin') //這是一個(gè)管理員才能訪問的路由

　　13. },

　　14. ...此處可能會(huì)有很多其他路由，這些路由數(shù)據(jù)應(yīng)該由專門的數(shù)據(jù)表來存儲(chǔ)

　　15. ]

　　16. })

　　17. })

　　4、前端登錄并動(dòng)態(tài)獲取路由配置

　　前端登錄成功后，會(huì)得到后端動(dòng)態(tài)下發(fā)的，跟自己賬號(hào)角色相匹配的路由數(shù)據(jù)，此時(shí)可以通過addRoute方法，將這些動(dòng)態(tài)獲取的路由配置數(shù)據(jù)包，設(shè)置給router對(duì)象

　　// views/Login.vue 登錄面板

　　axios.get('/login',(result)=>{

　　let {routerList} = result

　　routerList.forEach((item) => {

　　this.$router.addRoute(item)

　　})

　　})