• 宣傳官網 xb.exrick.cn
• 在線Demo xboot.exrick.cn
• 開源版Github地址 github.com/Exrick/x-bo…
• 開發文檔 www.kancloud.cn/exrick/xboo…
• 獲取完整版 xpay.exrick.cn/pay?xboot

---

路由分為兩種：一種存儲在本地文件中，大部分為固定的頁面功能菜單；另一種為根據用戶角色動態加載的菜單包含相應按鈕權限信息。

• 固定路由菜單在文件src/router/router.js中
• 動態路由加載方法主要在文件src/libs/util.js中，主要通過router.addRoutes(routes)實現路由動態添加

util.initRouter = function (vm) {const constRoutes = [];const otherRoutes = [];// 404路由需要和動態路由一起加載const otherRouter = [{path: '/*',name: 'error-404',meta: {title: '404-頁面不存在'},component: 'error-page/404'}];// 判斷用戶是否登錄let userInfo = Cookies.get('userInfo')if (userInfo == null || userInfo == "" || userInfo == undefined) {// 未登錄return;}let accessToken = window.localStorage.getItem('accessToken')// 加載菜單axios.get(getMenuList, { headers: { 'accessToken': accessToken } }).then(res => {let menuData = res.result;if (menuData == null || menuData == "" || menuData == undefined) {return;}// 頂部菜單let navList = [];menuData.forEach(e => {let nav = {name: e.name,title: e.title,icon: e.icon}navList.push(nav);})if (navList.length < 1) {return;}// 存入vuexvm.$store.commit('setNavList', navList);let currNav = window.localStorage.getItem('currNav')if (currNav) {// 讀取緩存titlefor (var item of navList) {if (item.name == currNav) {vm.$store.commit('setCurrNavTitle', item.title);break;}}} else {// 默認第一個currNav = navList[0].name;vm.$store.commit('setCurrNavTitle', navList[0].title);}vm.$store.commit('setCurrNav', currNav);for (var item of menuData) {if (item.name == currNav) {// 過濾menuData = item.children;break;}}util.initRouterNode(constRoutes, menuData);util.initRouterNode(otherRoutes, otherRouter);// 添加主界面路由vm.$store.commit('updateAppRouter', constRoutes.filter(item => item.children.length > 0));// 添加全局路由vm.$store.commit('updateDefaultRouter', otherRoutes);// 刷新界面菜單vm.$store.commit('updateMenulist', constRoutes.filter(item => item.children.length > 0));let tagsList = [];vm.$store.state.app.routers.map((item) => {if (item.children.length <= 1) {tagsList.push(item.children[0]);} else {tagsList.push(...item.children);}});vm.$store.commit('setTagsList', tagsList);}); };// 生成路由節點 util.initRouterNode = function (routers, data) {for (var item of data) {let menu = Object.assign({}, item);// menu.component = import(`@/views/${menu.component}.vue`);menu.component = lazyLoading(menu.component);if (item.children && item.children.length > 0) {menu.children = [];util.initRouterNode(menu.children, item.children);}let meta = {};// 給頁面添加權限、標題、第三方網頁鏈接meta.permTypes = menu.permTypes ? menu.permTypes : null;meta.title = menu.title ? menu.title + " - XBoot前后端分離開發平臺 By: Exrick" : null;meta.url = menu.url ? menu.url : null;menu.meta = meta;routers.push(menu);} }; 復制代碼

注意：404路由需要和動態路由一起加載，避免直接訪問動態路由路徑鏈接進入頁面時，動態路由還未加載導致先跳轉到404錯誤頁

• 加載組件src/libs/lazyLoading.js

export default (url) \=>()\=>import(`@/views/${url}.vue`) 復制代碼

• 存入Vuex

// 動態添加主界面路由，需要緩存 updateAppRouter(state, routes) {state.routers.push(...routes);router.addRoutes(routes); }, // 動態添加全局路由404、500等頁面，不需要緩存 updateDefaultRouter(state, routes) {router.addRoutes(routes); } updateMenulist(state, routes) {state.menuList = routes; }, 復制代碼

• src/main.js中進行調用

new Vue({el: '#app',render: h => h(App),mounted() {// 初始化菜單util.initRouter(this);} }) 復制代碼

轉載于:https://juejin.im/post/5cc1438f5188252d6c43fc79

總結

以上是生活随笔為你收集整理的Vue iView Admin 动态路由菜单加载 前后端分离（springboot 2.x iview admin vue 前后端分离 模型设计器 动态数据权限...的全部內容，希望文章能夠幫你解決所遇到的問題。

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