引言

正常的后台管理系统会分不同的用户，不同的用户会对应不同的功能和不同的导航菜单栏，所以我们左侧的导航栏不能够写死，必须要动态展示。所以导航栏信息要从后台获取，然后再展示。每个导航栏子菜单都会绑定一个路由，所以还要实现动态路由绑定。

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中由写道。

动态导航与动态路由绑定相关推荐

vue路由第三篇-导航守卫、路由元信息、动态路由
导航守卫 1. 环境准备 1.1 安装Element-Plus npm install element-plus 1.2 注册Element-Plush 需要在 main.ts 文件中注册 impor ...
jsf集成spring_Spring和JSF集成：动态导航
jsf集成spring 通常,您的JSF应用程序将需要超越基本的静态导航并开始做出动态导航决策. 例如,您可能想根据用户的年龄重定向他们. 大多数JSF教程建议通过将命令的action属性绑定到支持b ...
Spring和JSF集成：动态导航
通常,您的JSF应用程序将需要超越基本的静态导航并开始做出动态导航决策. 例如,您可能想根据用户的年龄重定向他们. 大多数JSF教程建议通过将命令的action属性绑定到支持bean来实现动态导航: ...
html导航栏动态图标,导航栏动态图.html
导航栏动态图 $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif' ...
css制作动态按钮导航栏,巧妙使用checkbox制作纯css动态导航栏
前提:很多时候.我们的网页都需要一个垂直的导航栏.可以分类.有分类.自然就有展开.关闭的功能.你还在使用jquery操作dom来制作吗?那你就out了! 方案:使用checkbox 的 checked ...
【虚幻引擎UE】UE5实现动态导航样条线自动绘制
参考文章:https://blog.csdn.net/tianxiaojie_blog?spm=1001.2014.3001.5509 生成动态导航路径 1.首先修改项目设置,动态生成导航 2.然后构 ...
动态创建模板列并绑定数据（GridView，Repeater，DataGrid）
要创建动态模板,请创建以后需要时可实例化的模板类. 创建模板类创建实现 System.Web.UI.ITemplate 接口的新类. 您也可以将值传递到类的构造函数,类可以使用该值来确定要创建的模板 ...
Vue学习（动态组件、组件路由缓存keepalive）-学习笔记
文章目录 Vue学习(动态组件.组件路由缓存keepalive)-学习笔记动态组件组件路由缓存keepalive Vue学习(动态组件.组件路由缓存keepalive)-学习笔记动态组件 < ...
html select ajax,AJAX 动态加载后台数据绑定select的方法
直接上代码是可以用的,后台代码我就不贴了,我相信后台代码大家都会,直接返回json数据,我是前端比较差的,所以喜欢把每次不会的全部记起来 html代码 //下拉框数据动态加载 js代码 $.ajax ...

动态导航与动态路由绑定