requirements

recently took over a backstage management system that needs to achieve the effect of the navigation menu from the background; the navigation menu that is pulled out according to the privileges of the login user is different, and there is also a difference in the interface that can be used. The

problem

is done because the backstage management system is prepared to use the collocation of vue+vue-router+element-ui+vuex, but a single page application has been instantiated and injected into the Vue instance before entering the page, so when you enter the login page Waiting for the old can not be re - Custom routing. Next, we found that vue-router has provided the addRoutes method to add routing in version 2, and the dawn of hope is coming.

has finally realized its functions after a series of frustrating, recording it for review, and hoping to help comrades who have similar needs.

ideas

1, first in the local configuration of fixed and fixed routing addresses, such as logon, such as the 404 pages. R = new Router ({routes: [{path:'/login', name:'login', meta: {requireAuth: false}, / / module using asynchronous loading component:)}) / / intercept logon; To.meta.requireAuth = = = = = = undefined) {if (store.state.token) {next ()} else {next ({path:'/login'})}} else {next ()}}) are configured for these fixed routes before we can go to the login page, otherwise it is impossible to continue.

2, and then an important step, we need to make an agreement with the back end old iron for the list of privileges that need to be returned; first of all, we first analyze the routing structure you need, here with my own routing as an example. If I define the route directly, it will be the following structure:

 let router = new Router ({routes: [{path:'/login', name:'login', meta:}, {}, {} / ', Redirect:'/layout'}, {path:'/layout', component: (resolve) => require (['../layout.vue'], resolve), children: [{path:}, / / / / / / control shows hidden 1 displays, 2 hidden 00010001, / / / / behind need to control Route highlighting title: 'homepage', / / menu name permissonList: [] / / permission list} component: (resolve) => require (['@/components/index/index.vue'], resolve)}, {...}}}}) 

based on the above structure analysis, actually true The routing that needs to be dynamically configured is actually a part of the children under /layout, so the back end is required to return to the

returned data in the rootList is a list of first level navigation, the first level navigation is actually no routing function, just as a trigger for switching two level menus, subList is the routing information we really need.

3, after getting the authority routing information, we need to process the data locally and assemble the data we need:

 / / logon login () {let params = {account:} This.loading = true this.$http.post (this.$bumng +'/login', this.$HP (params)).Then (RES) => {this.loging = false definitions (' menu list: ') = handleMenu.mergeSubInRoot (res.rootList, res.subList) / / / localised menu list this.saveRes ({label:'menuList', value: menus}) / / / / / / let routes = handleMenu.mergeRoutes / / / localisation, then refresh the page When re configuring routing this.saveRes ({label:'subList', value: res.subList}) / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / / this.$router, if (this.$router.options.routes.length < = 1) {this.$router.addRoutes (routes) / / this.$router is not responsive, so the routing element is injected manually This.$router.options.routes.push (routes)} this.$router.replace ('/layout/index')}}).Catch (ERR) => {this.loging = false console.error (' error: ', ERR)}}) And mergeRoutes

 const routes = [{path: '/', redirect:'/layout'}, {path:'/layout', component: (resolve) =>} {/ * *} merge main menu and submenu * Param: subList [Array] submenu * / mergeSubInRoot (roots, subs) {if (roots & & subs) {for = {for = {= 0; {] {= = = = = = = = = = = = = = 0; roots = = = = = = = = = = = = = = = = = = = 0; roots & roots & & subs). Ng (0, 4)) {roots[i].children.push (subs[j])}}}} return roots}, / * * merge remote routing to local routing * @param: subList [Array] remote routing list * @param: routes [Array] local routing list * * * * / mergeRoutes {0} S.length; i++) {let temp = {path: subs[i].actUrl, name: subs[i].actUrl, component: (resolve) => [i].permissionList}} routes[1].children.push (Temp)}}} return routes}}

at this point we have successfully configured the permissions route into local routing, and my system login enters the following

follow up optimization

1, menu list display and two level navigation switch:

 <. Ackground-color= "#545c64" text-color= "#fff" active-text-color= "#ffd04b" > < el-menu-item: index= "item.code splitCode". > < span slot= "title" > {{item.name}}< /span> < /el-menu-item> < /el-menu>. Ome to Your Vue.js App'}}, computed: {... MapState (['menuList']), activeCode () {/ / / / / / / / / / / / / code ensures that the first level routing in the case of switched word routing is also highlighting the return this.$route.meta.code.substring (0, 4)}}, {...} Two level routing switchSubMenu (route) {console.info ('Routing:', route) if (route.actUrl! = ='index') {/ / / / / / / / / / currentSubMenu controls two level routing data this.saveRes ({label:'currentSubMenu', value:)}} Else {/ / / / / / / / no two level routing hidden two level this.saveRes ({label:'currentSubMenu', value:' '}) this.$router.push (`/layout/${route.actUrl}`)}}, filters: {splitCode (code) {return code.substring (0, 4)}}} It is lost; since the single page application is re - initialized at the time of refresh, the routing of all configuration will be lost, and only before the liberation, only the local configuration route can jump. At this time, we can execute the following code in app.vue (PS: wherever it is refreshed, app.vue will execute): 

 < script> import {decrypt} from'@/libs/AES'import. The length of the ons.routes is 1, and the routing if is reconfigured when the local cache has a menu list (this.$router.options.routes.length < = 1 & & sessionStorage.getItem ('subList')) {let subList = JSON.parse (decrypt)) =) S (subList) this.$router.addRoutes (routes) / / this.$router is not a response type, so the routing element is manually injected into the routing object this.$router.options.routes.push (routes)}}}}} < /script> 

will reconfigure the routing even if it is refreshed.

3, about page button level control, you can customize an instruction to do this. Since our already privileged list is placed in the meta object of the corresponding route, we can easily go back to the current user's right

reference document Custom Instruction

you might be interested in:

This paper fixed link:http://www.script-home.com/example-of-vue-addroutes-realizing-dynamic-privilege-routing-menu.html | Script Home | +Copy Link

Article reprint please specify:Example of Vue addRoutes realizing dynamic privilege routing menu | Script Home

You may also be interested in these articles!