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

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

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

? ? ?? ?

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

_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中定義獲取后端傳回路由表的函數，并保存在localstorage中，同樣，我們用module區分store，將這部分寫在use.js中：??

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

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

????到這里就可以實現動態路由加載了。

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

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

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。