Shulou(Shulou.com)05/31 Report--

In this article, the editor introduces in detail "how to use vue-router to achieve dynamic access control", the content is detailed, the steps are clear, and the details are handled properly. I hope that this article "how to use vue-router to achieve dynamic access control" can help you solve your doubts.

Using vue to develop a management system with rights, especially using vue-router to do routing, a problem that many people encounter is how to dynamically load the component corresponding to routing path.

A typical application scenario is that the front-end menu is not statically written in the vue program, but is dynamically loaded into the vue application from the menu returned from the background program and database.

There are many questions about permission on the Internet, but there are almost no good answers, which has dealt a blow to the confidence of developers using vue technology stack for a long time. The question is:

1) after logging in, jump to the home page, where the route has been loaded and cannot be changed. The menu can be displayed but there is no route.

2) there are some problems caused by the front-end application of artificially refreshing web page routing.

The premise is to read the above-mentioned article carefully, and speak directly in code below:

The solution to problem 1:

After logging in, jump to the home page. Router is the router of the vue application to introduce the login method. Change the router before jumping after login. The change point 1 is to assign the exact value to the routes specific place of the router. For example, here is the sub-route of routes [0], and 2 is to use the addRoutes function to make it effective.

Js of login function

Export const login = ({commit}, data) = > {Service.post ('/ login', Qs.stringify (data)). Then (res = > {const success = Object.is (res.statusText, 'OK') & & Object.is (res.data.code,' 0') if (success) {var menus = generateMenus (res.data.menus) window.sessionStorage.routes = JSON.stringify (menus) if (menuModule.state.items.length require ([`views/ `+ item.component + `.vue`] Resolve) generateRoutesFromMenu (item.children, routes)}} return routes}

The solution to problem 2:

Instead of introducing js that instantiates vue-router in the main app, instantiate router directly in app to ensure that a dynamic router is generated every time the page is refreshed.

Part of the app.js code:

Vue.use (Router) let menus = window.sessionStorage.routes / / menu returned after successful login if (menus) {let items = JSON.parse (menus) store.commit (ADD_MENU, items)} const router = new Router ({mode: 'hash', linkActiveClass:' is-active', scrollBehavior: () = > ({y: 0}), routes: [{name: 'Main', path:' /', component: require ('views/Main.vue') Children: [/ / dynamic routing as a sub-route of Main is based on: jump to the Main home page after login The home page is a page loading framework similar to frame, and only dynamic routing as a child route of Main can ensure that other pages are displayed in the Main framework. ... generateRoutesFromMenu (menuModule.state.items)]}, {name: 'Login', path:' / login', component: require ('views/Login.vue')}}) function generateRoutesFromMenu (menu = [], routes = []) {for (let I = 0, l = menu.length; I)

Require ([`views/ `+ item.component + `.vue`], resolve) generateRoutesFromMenu (item.children, routes)}} return routes}

Menu items code is attached.

Const state = {items: [/ / any menu is not defined and is returned entirely by the backend]} const mutations = {[types.ADD_MENU] (state, menuItems) {if (menuItems.length > 0) {menuItems.map (function (item) {item.children.map (function (child) {child.component = lazyLoading (child.component)}) state.items.push (. MenuItems)}}

Lazyloding

Export default (name, index = false) = > () = > import (`views/$ {name} ${index?'/ index':''} .vue`) here, this article "how to use vue-router to achieve dynamic permission control" has been introduced. If you want to master the knowledge of this article, you still need to practice and use it. If you want to learn more about related articles, please follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.