Cette fois, je vais vous montrer comment utiliser vue addRoutes pour implémenter un menu de routage d'autorisations dynamique, et quelles sont les précautions à prendre pour utiliser vue addRoutes pour implémenter un menu de routage d'autorisations dynamique. Ce qui suit est un cas pratique, prenons. un regard.
Exigences
Récemment, j'ai repris un système de gestion backend et je dois réaliser l'effet de l'extraction du menu de navigation du backend ; cela dépend des autorisations de l'utilisateur connecté. Le menu de navigation extrait est également différent, et l'interface utilisable est également différente.
Problème
Parce que le système de gestion en arrière-plan est prêt à utiliser la combinaison de vue+vue-router+element-ui+vuex, mais L'application monopage a instancié vue-router et l'a injecté dans l'instance de vue avant d'entrer dans la page, il n'y a donc aucun moyen de re-personnaliser le routage lors de l'entrée dans la page de connexion. Après de nombreuses recherches, j'ai découvert que vue-router fournissait la méthode addRoutes pour ajouter des routes dans la version 2.0, et une lueur d'espoir est apparue.
Après beaucoup de travail acharné, la fonction a finalement été implémentée. Je l'ai enregistrée pour une révision facile, et j'espère qu'elle pourra aider les camarades qui ont les mêmes besoins.
Idées
1. Configurez d'abord une adresse de routage fixe localement, telle que la connexion, 404 pages, comme suit :
import Vue from 'vue' import Router from 'vue-router' import store from '@/vuex/store' Vue.use(Router) let router = new Router({ routes: [ { path: '/login', name: 'login', meta: {requireAuth: false}, // 模块使用异步加载 component: (resolve) => require(['../components/login/login.vue'], resolve) }] }) // 拦截登录,token验证 router.beforeEach((to, from, next) => { if (to.meta.requireAuth === undefined) { if (store.state.token) { next() } else { next({ path: '/login' }) } } else { next() } }) export default router
let router = new Router({ routes: [ { path: '/login', name: 'login', meta: {requireAuth: false}, component: (resolve) => require(['../components/login/login.vue'], resolve) }, { path: '/', redirect: '/layout' }, { path: '/layout', component: (resolve) => require(['../layout.vue'], resolve), children: [ { path: 'index', meta: { type: '1', //控制是否显示隐藏 1显示,2隐藏 code: 00010001, // 后面需要控制路由高亮 title: '首页', // 菜单名称 permissonList: [] // 权限列表 } component: (resolve) => require(['@/components/index/index.vue'], resolve) }, { ... } ] }] })
// 登录 login () { let params = { account: this.loginForm.username, password: encrypt(this.loginForm.password) } this.loading = true this.$http.post(this.$bumng + '/login', this.$HP(params)) .then((res) => { this.loging = false console.info('菜单列表:', res) if (res.resultCode === this.$state_ok) { // 合并一级菜单和二级菜单,便于显示 let menus = handleMenu.mergeSubInRoot(res.rootList, res.subList) // 本地化处理好的菜单列表 this.saveRes({label: 'menuList', value: menus}) // 根据subList处理路由 let routes = handleMenu.mergeRoutes(res.subList) // 本地化subList,便于在刷新页面的时候重新配置路由 this.saveRes({label: 'subList', value: res.subList}) // 防止重复配置相同路由 if (this.$router.options.routes.length <= 1) { this.$router.addRoutes(routes) // this.$router不是响应式的,所以手动将路由元注入路由对象 this.$router.options.routes.push(routes) } this.$router.replace('/layout/index') } }) .catch((err) => { this.loging = false console.error('错误:', err) }) },
const routes = [ { path: '/', redirect: '/layout' }, { path: '/layout', component: (resolve) => require(['../layout.vue'], resolve), children: [] } ] export default { /** * 合并主菜单和子菜单 * @param: rootList [Array] 主菜单列表 * @param: subList [Array] 子菜单 * */ mergeSubInRoot (roots, subs) { if (roots && subs) { for (let i = 0; i < roots.length; i++) { let rootCode = roots[i].code roots[i].children = [] for (let j = 0; j < subs.length; j++) { if (rootCode === subs[j].code.substring(0, 4)) { roots[i].children.push(subs[j]) } } } } return roots }, /** * 合并远程路由到本地路由 * @param: subList [Array] 远程路由列表 * @param: routes [Array] 本地路由列表 * */ mergeRoutes (subs) { if (subs) { for (let i = 0; i < subs.length; i++) { let temp = { path: subs[i].actUrl, name: subs[i].actUrl, component: (resolve) => require([`@/components/${subs[i].component}.vue`], resolve), meta: { type: subs[i].type, code: subs[i].code, title: subs[i].name, permissionList: subs[i].permissionList } } routes[1].children.push(temp) } } return routes } }
Suivez. up Optimiser
1. Affichage de la liste des menus et changement de navigation secondaire :<template> <p class="mainMenu"> <el-menu class="menubar" mode="horizontal" :default-active="activeCode" background-color="#545c64" text-color="#fff" active-text-color="#ffd04b"> <el-menu-item :index="item.code | splitCode" v-for="item in menuList" :key="item.code" @click="switchSubMenu(item)" v-if="item.code !== '0008'"> <i :class="`iconfont icon-${item.imgUrl}`"></i> <span slot="title">{{item.name}}</span> </el-menu-item> </el-menu> </p> </template> <script type="text/ecmascript-6"> import {mapState, mapMutations} from 'vuex' export default { name: 'menu', data () { return { msg: 'Welcome to Your Vue.js App' } }, computed: { ...mapState(['menuList']), activeCode () { // 通过code保证在切换字路由的情况下一级路由也是高亮显示 return this.$route.meta.code.substring(0, 4) } }, methods: { ...mapMutations(['saveRes']), // 切换二级路由 switchSubMenu (route) { console.info('路由:', route) if (route.actUrl !== 'index') { // 用currentSubMenu控制二级路由数据 this.saveRes({label: 'currentSubMenu', value: route.children}) this.$router.push(`/layout/${route.children[0].actUrl}`) } else { // 不存在二级路由隐藏二级 this.saveRes({label: 'currentSubMenu', value: ''}) this.$router.push(`/layout/${route.actUrl}`) } } }, filters: { splitCode (code) { return code.substring(0, 4) } } } </script>
<script> import {decrypt} from '@/libs/AES' import handleMenu from '@/router/handleMenu' export default { name: 'app', created () { // 当this.$router.options.routes的长度为1,且本地缓存存在菜单列表的时候才重新配置路由 if (this.$router.options.routes.length <= 1 && sessionStorage.getItem('subList')) { let subList = JSON.parse(decrypt(sessionStorage.getItem('subList'))) let routes = handleMenu.mergeRoutes(subList) this.$router.addRoutes(routes) // this.$router不是响应式的,所以手动将路由元注入路由对象 this.$router.options.routes.push(routes) } } } </script>
Étapes détaillées pour créer un environnement de développement React à l'aide de create-react-app
Comment utiliser element- sélection de la date limite de l'interface utilisateur
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!