????????上一篇介紹了一種動態(tài)路由的方案，由前端寫好路由表，然后通過登陸用戶的角色來匹配出需要的路由。今天來研究下另外一種方案，后端返回路由表，然后生成導(dǎo)航菜單。

????????先講下場景，同樣是做權(quán)限控制，要根據(jù)登陸者的角色，生成對應(yīng)角色能訪問的路由，并生成菜單，生成菜單可以直接遍歷路由，這里不多講。這種場景中，由后端根據(jù)登陸者的信息，返回對應(yīng)的路由表，然后前端將路由表轉(zhuǎn)換成正確的路由，添加到路由實例上，并能正確切換組件頁面。

????????首先，同樣先寫好路由文件，定義好靜態(tài)路由(不需要權(quán)限訪問的路由)，并創(chuàng)建路由實例，掛載到Vue實例上router.js：

? ? ?? ?

在router.js同級再新建兩個js文件，_import_development.js和_import_production.js文件，這兩個文件的作用就是區(qū)分環(huán)境，并把component轉(zhuǎn)換成組件?：

_import_development.js：

????????module.exports?=?file?=>?require('@/'?+?file?+?'.vue').default

_import_production.js：

????????module.exports?=?file?=>?()?=>?import('@/'?+?file?+?'.vue')

然后，main.js中引入并掛載到Vue實例上main.js:

????????然后，在vuex中定義獲取后端傳回路由表的函數(shù)，并保存在localstorage中，同樣，我們用module區(qū)分store，將這部分寫在use.js中：??

????這里我們假設(shè)在獲取用戶信息的時候調(diào)接口返回路由表，并保存在vuex中和localstorage中。

????????最后我們在路由守衛(wèi)中，把路由表轉(zhuǎn)換成可用的并添加到路由實例上，我們在main.js的同級目錄下新建perssion.js:

????到這里就可以實現(xiàn)動態(tài)路由加載了。

????總結(jié)一下：我們請求接口，后端返回動態(tài)路由表給我們，我們保存在本地，然后在路由守衛(wèi)中，通過一些方法將路由表轉(zhuǎn)換成可用的路由，其中最重要的就是將component轉(zhuǎn)換成組件，我們判斷userInfo是否存在來確定是否重新請求路由表。

????步驟：首先我們寫好router.js文件，定義好靜態(tài)路由并創(chuàng)建路由實例，將靜態(tài)路由添加到路由實例上，并在同級目錄下新建兩個js文件，區(qū)分環(huán)境將component轉(zhuǎn)換成組件；然后，在store中請求接口將返回的路由表保存在本地；然后，在路由守衛(wèi)中使用方法將component組件化，通過router.addRouters添加到路由實例上，并且根據(jù)userInfo的存在來判斷是否要重新請求路由接口。

??????? VUE動態(tài)路由也就這兩種方案了，看完這篇和上一篇的介紹，希望對你有所幫助，有不足或錯誤的地方感謝指正。

總結(jié)

以上是生活随笔為你收集整理的动态添加的路由 直接访问_VUE 动态路由（二）的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。