How to realize routing lazy loading and privilege Control in vue-router

This article mainly introduces the relevant knowledge of "how to achieve routing lazy loading and access control in vue-router". The editor shows you the operation process through an actual case. The operation method is simple, fast and practical. I hope this article "how to achieve routing lazy loading and access control in vue-router" can help you solve the problem.

1. Why use lazy routing loading?

When writing a single page application with vue.js, the packaged JavaScript package will be very large, which will affect the page loading. We can use the lazy loading of routes to optimize this problem. When we use a certain route, we will load the corresponding components, which will be more efficient.

2. Usage

Import Vue from 'vue'import Router from' vue-router'Vue.use (Router) export default new Router ({routes: [{path:'/', meta: {requiresAuth: true}, component: resolve = > require (['components/Hello.vue'], resolve)}, {path:' / about', component: resolve = > require (['components/About.vue'], resolve)}]})

3. Control the rights of routing hooks.

/ / Registration global hook is used to intercept navigation router.beforeEach ((to, from, next) = > {/ / get token let token = store.state.token; / / in store to determine whether there is a requiresAuth if (to.meta.requiresAuth) {if (token) {next () } else {next ({path:'/ login', query: {redirect: to.fullPath} / / take the route path to which you are about to go (but do not have permission) as a parameter to facilitate the direct jump to that route} after successful login);}} else {next (); / / if you don't need token, then let it go}}) This is the end of the content about "how to achieve routing lazy loading and access control in vue-router". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.