10.动态路由绑定怎么做

为什么要动态路由绑定

因为,如果我们的导航栏没有这个权限,输入对应网址,一样可以获取对应的页面,为了解决这个问题,有两种解决方案,一种是动态路由绑定(导航有多少个,就有多少个路由,在路由修改之前,先进行一个导航路由的加载和路由的动态绑定,然后看是否有这个路由,有就跳转),一种是权限的校验(路由修改之前,进行一个拦截,对用户的权限进行一个校验),这两种方法都可以在路由页面里,使用beforeEach来进行操作,这里是动态路由绑定

思路

将这个用户的能显示显示的导航栏对应的路由,和我们的路由配置进行一个绑定和校验,这样的话,如果说没有这个用户对应的路由,那么就无法跳转到对应的页面

步骤(1-3步是准备步骤)

1.使用mock.js返回对应的菜单栏和用户权限

因为还没写后端,所以使用mock.js来模拟一下

Mock.mock('/sys/menu/nav', 'get', () => {let nav = [{name: 'SysManga',title: '系统管理',icon: 'el-icon-s-operation',component: "",path: '',children: [{name: 'SysUser',title: '用户管理',icon: 'el-icon-s-custom',component: "sys/User",path: '/sys/user',children: []}]},{name: 'SysTools',title: '系统工具',icon: 'el-icon-s-tools',path: '',component: "",children: [{name: 'SysDict',title: '数字字典',icon: 'el-icon-s-order',path: '/sys/dicts',component: "sys/Dict",children: []},]},]let authoritys = [];Result.data = {nav: nav,authoritys: authoritys}return Result;
});

2.在store里面写一个menu.js的页

将我们需要再其他页面使用的变量和方法写入

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)export default {state: {menuList: [],authoritys: [],validation: false,},getters: {},mutations: {// 菜单列表setMenuList(state, menu) {state.menuList = menu},// 权限列表setPermList(state, perms) {state.authoritys = perms},setValidation(state, validation) {state.validation = validation;}},modules: {},actions: {},
}

3.给对应的页面插入对应的元素

<template><el-menuclass="el-menu-vertical-demo"background-color="#545c64"text-color="#fff"active-text-color="#ffd04b"@select="handleSelect"><!-- 首页菜单项 --><el-menu-item index="Index"><template #title><i class="el-icon-s-home"></i>首页</template></el-menu-item><!-- 系统管理子菜单 --><el-submenu :index="menu.name" v-for="menu in menuList" :key="menu.name"><template #title><i :class="menu.icon"></i><span>{{ menu.title }}</span></template><!-- 用户管理子菜单 --><el-menu-itemv-for="item in menu.children":key="item.name":index="item.path"><template #title><i :class="item.icon"></i><span>{{ item.title }}</span></template></el-menu-item></el-submenu></el-menu>
</template><script>
export default {name: "SideMenu",data() {return {}},computed: {menuList: {get() {return this.$store.state.menu.menuList},}},methods: {handleSelect(index) {this.$router.push(index);},}
}
</script><style scoped>
.el-menu-vertical-demo {flex: 1; /* 菜单项占据 el-aside 的剩余空间 */overflow-y: auto; /* 如果内容过多，显示滚动条 */width: 200px;
}
</style>

4.在路由页面写入beforeEach方法(有注释的)

思路:

1.在路由改变时发一个请求,拿到对应的菜单栏和权限

2.动态绑定路由

2.1 因为这里是子路由,所以先遍历,排除没有子路由的路由

2.2 再遍历子路由,看有没有component(具体的页面),排除没有的

2.3 将有component的对象里的元素封装为一个主路由(我这里主路由名为Home)的子路由

2.4 但是现在有个问题,每次路由修改之后我都要发请求,浪费,所以,在store中的页面里定义一个布尔类型的validation,给个默认值false,当请求完成,修改为true,下次就不会发请求,节约性能

router.beforeEach((to, from, next) => {const validation = store.state.menu.validation;if (!validation) {axios.get("/sys/menu/nav", {headers: {Authorization: localStorage.getItem("token"),}}).then(res => {// 拿到 menuListstore.commit("setMenuList", res.data.data.nav);// 拿到用户权限store.commit("setPermList", res.data.data.permList);// 动态绑定路由store.state.menu.menuList.forEach(item => {if (item.children) {item.children.forEach(e => {if (e.component) {router.addRoute("Home", {path: e.path,name: e.name,component: () => import(`@/views/${e.component}`),});}});}});// 更新 validation 状态console.log(123456)store.commit('setValidation', true);// 确保在异步操作完成后继续导航next({path: to.fullPath});}).catch(error => {console.error('Error fetching menu:', error);// 处理请求失败的情况，例如重定向到登录页面next('/login');});} else {// 如果已经验证过，直接继续导航next();}
});