動態導航與動態路由綁定

• 引言
• 1、導航數據的獲取
• 2、進行導航菜單和路由動態綁定。
• • 2.1動態導航
  • 2.2動態路由綁定
• 3、問題及解決方法

引言

正常的后臺管理系統會分不同的用戶，不同的用戶會對應不同的功能和不同的導航菜單欄，所以我們左側的導航欄不能夠寫死，必須要動態展示。所以導航欄信息要從后臺獲取，然后再展示。每個導航欄子菜單都會綁定一個路由，所以還要實現動態路由綁定。

1、導航數據的獲取

獲取路由之前先進行用戶導航數據的加載。此部分代碼在"進行導航菜單和路由動態綁定"代碼部分中。
從后臺獲取相關導航欄信息，如下圖所示：

menuList = [{name: 'SysManga',//對應indextitle: '系統管理',icon: 'el-icon-s-operation',path: '',//router-link跳轉路由component: '',children: [{name: 'SysUser',title: '用戶管理',icon: 'el-icon-s-custom',path: '/sys/user',component: 'User',children: []},{name: 'SysRole',title: '角色管理',icon: 'el-icon-s-custom',path: '/sys/role',component: 'Role',children: []},{name: 'SysMenu',title: '菜單管理',icon: 'el-icon-s-custom',path: '/sys/menu',component: 'Menu',children: []},]},{name: 'SysTools',title: '系統工具',icon: 'el-icon-s-tools',path: '',component: '',children: [{name: 'SysDict',title: '數字字典',icon: 'el-icon-s-order',path: '/sys/dicts',component: '',children: []},]},]

因為要實現動態路由綁定，所以每個菜單項都要包含路由表項包含的信息。
路由信息存放在router文件夾下的index.js中
例如：

const routes = [{path: '/',name: 'Home',component: Home,redirect: '/index',children: [{path: '/index',name: '/index',component: () => import('../views/Index')},{path: '/sys/person',name: 'Menu',component: () => import('../views/Person')},]},{path: '/login',name: 'Login',// route level code-splitting// this generates a separate chunk (about.[hash].js) for this route// which is lazy-loaded when the route is visited.component: ()=>import('../views/Login')} ]

所以我們的后臺存儲的導航欄菜單項必須要要包括name、path、component、children項，還包含一些額外的項，如 title、icon。這兩個字段時在前端顯示時會用到。

2、進行導航菜單和路由動態綁定。

在router中index.js實現動態導航與動態路由綁定，router.beforeEach是導航守衛（導航欄的守衛者）
導航守衛鏈接

2.1動態導航

（1）拿到menuList：對應用戶導航菜單欄列表
（2）拿到用戶權限：用戶是否能執行某些操作
菜單列表和權限都是存放在store中的，本項目在store文件下單獨創建了一個menu模塊,我們只需要在store文件夾下的index.js導入并引入menu.js即可。具體操作見Router Modules模塊化
menu.js

import Vue from 'vue' import Vuex from 'vuex'Vue.use(Vuex) //錯誤寫法export default new Vuex.Store({}) //正確寫法export default{} ，因為Store只能有一個，并且放在store下的index.js //記得在index.js中引用該模塊 export default {state: {menuList: [],permList: [],//權限列表//因為刷新頁面都會執行router.beforEach函數，但是該函數只需要執行一次就可以了// 所以設置hasRole用來判斷該函數是否執行過hasRole: false,},//異步操作state中的變量mutations: {setMenuList(state,menuList){state.menuList = menuList;},setPermList(state,permList){state.permList = permList;},//修改hasRole值changeRouteState(state,hashRole){state.hasRole = hashRole;}},actions: {},}

2.2動態路由綁定

（1）獲取當前路由表。
（2）遍歷后端返回的菜單項menuList，將子菜單項添加到路由表中。

a:如果有子菜單,遍歷子菜單 。
b:自定義menuToRoute方法將子菜單項轉為路由項。
c:當轉換后的路由存在時，將其添加到newRoutes。

（3）添加路由。

router文件夾下index.js部分代碼

router.beforeEach((to, from, next) => {//獲取路由狀態let hasRoute = store.state.menus.hasRole;//當hasRoute為false時，才去進行動態路由綁定，//若為true則認為已經綁定過，則不需要再次綁定if(!hasRoute){//此處使用的axios不是我們封裝好的axios.js,//因為我們封裝好的axios里面會在請求中添加headers所以我們在這里也要加上headeraxios.get('/sys/menu/nav',{headers: {Authorization: localStorage.getItem("token"),}}).then(res => {//一、動態導航//拿到menuList：對應用戶菜單權限let menuList = res.data.data.navconsole.log(menuList)store.commit("setMenuList",menuList)//拿到用戶權限：用戶是否能執行某些操作console.log(res.data.data.authorities)store.commit("setPermList",menuList)//二、動態路由綁定//1、獲取當前路由表let newRoutes = router.options.routes;//2、遍歷后端返回的菜單項，將子菜單項添加到路由表中res.data.data.nav.forEach(menu => {//2.1如果有子菜單if(menu.children){//遍歷子菜單menu.children.forEach(item => {//自定義menuToRoute方法將子菜單項轉為路由項let route = menuToRoute(item)//當route不為空時添加到newRoutesif(route){newRoutes[0].children.push(route)}})}})//3、添加路由console.log("newRoutes")console.log(newRoutes)router.addRoutes(newRoutes)//將hashRole值設為true，下次可以不用再進行路由綁定store.commit("changeRouteState",true)})}next() })//導航轉路由方法 const menuToRoute = (menu) => {// 只有當component不為空時才轉為路由if(menu.component){return{path: menu.path,name: menu.name,//meta中可以放一些額外之，權限就可以放在里面meta: {icon: menu.icon,title: menu.title},//component: () => import('../views/'+menu.component)}}return null; }

3、問題及解決方法

當我們每次刷新頁面時都會執行一次動態導航與動態路由綁定操作，實際上對于一個用戶只需要執行一次，所以我們通過一個Boolean變量hasRole來判斷是否是第一次登錄，只有第一次才進行動態導航與動態路由綁定，再次刷新頁面的時候不再進行動態導航與動態路由綁定。當然hasRole也是存放在store中的，menu.js中由寫道。

《新程序員》：云原生和全面數字化實踐50位技術專家共同創作，文字、視頻、音頻交互閱讀

總結

以上是生活随笔為你收集整理的动态导航与动态路由绑定的全部內容，希望文章能夠幫你解決所遇到的問題。

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