動態(tài)導(dǎo)航與動態(tài)路由綁定

• 引言
• 1、導(dǎo)航數(shù)據(jù)的獲取
• 2、進(jìn)行導(dǎo)航菜單和路由動態(tài)綁定。
• • 2.1動態(tài)導(dǎo)航
  • 2.2動態(tài)路由綁定
• 3、問題及解決方法

引言

正常的后臺管理系統(tǒng)會分不同的用戶，不同的用戶會對應(yīng)不同的功能和不同的導(dǎo)航菜單欄，所以我們左側(cè)的導(dǎo)航欄不能夠?qū)懰?#xff0c;必須要動態(tài)展示。所以導(dǎo)航欄信息要從后臺獲取，然后再展示。每個導(dǎo)航欄子菜單都會綁定一個路由，所以還要實現(xiàn)動態(tài)路由綁定。

1、導(dǎo)航數(shù)據(jù)的獲取

獲取路由之前先進(jìn)行用戶導(dǎo)航數(shù)據(jù)的加載。此部分代碼在"進(jìn)行導(dǎo)航菜單和路由動態(tài)綁定"代碼部分中。
從后臺獲取相關(guān)導(dǎo)航欄信息，如下圖所示：

menuList = [{name: 'SysManga',//對應(yīng)indextitle: '系統(tǒng)管理',icon: 'el-icon-s-operation',path: '',//router-link跳轉(zhuǎn)路由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: '系統(tǒng)工具',icon: 'el-icon-s-tools',path: '',component: '',children: [{name: 'SysDict',title: '數(shù)字字典',icon: 'el-icon-s-order',path: '/sys/dicts',component: '',children: []},]},]

因為要實現(xiàn)動態(tài)路由綁定，所以每個菜單項都要包含路由表項包含的信息。
路由信息存放在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')} ]

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

2、進(jìn)行導(dǎo)航菜單和路由動態(tài)綁定。

在router中index.js實現(xiàn)動態(tài)導(dǎo)航與動態(tài)路由綁定，router.beforeEach是導(dǎo)航守衛(wèi)（導(dǎo)航欄的守衛(wèi)者）
導(dǎo)航守衛(wèi)鏈接

2.1動態(tài)導(dǎo)航

（1）拿到menuList：對應(yīng)用戶導(dǎo)航菜單欄列表
（2）拿到用戶權(quán)限：用戶是否能執(zhí)行某些操作
菜單列表和權(quán)限都是存放在store中的，本項目在store文件下單獨創(chuàng)建了一個menu模塊,我們只需要在store文件夾下的index.js導(dǎo)入并引入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: [],//權(quán)限列表//因為刷新頁面都會執(zhí)行router.beforEach函數(shù)，但是該函數(shù)只需要執(zhí)行一次就可以了// 所以設(shè)置hasRole用來判斷該函數(shù)是否執(zhí)行過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動態(tài)路由綁定

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

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

（3）添加路由。

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

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

3、問題及解決方法

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

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

總結(jié)

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

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