Several ways of routing guard -M

vue routing

Vue-router is the official routing plugin for Vue.js. Vue's single-page application is based on routing and components. Routing is used to set access paths and map paths and components. Traditional page applications use some hyperlinks to switch and jump pages. In the vue-router single-page application, it is the switching between paths, that is, the switching of components.
1. First introduce vue.js and vue-router.js
2. Create Router

var router = new VueRouter()

3. Mapping routes

router.map({
    
    
    '/home': {
    
     component: Home },
    '/about': {
    
     component: About }
})

4. Use the v-link command

<div class="list-group">
    <a class="list-group-item" v-link="{ path: '/home'}">Home</a>
    <a class="list-group-item" v-link="{ path: '/about'}">About</a>
</div>

5. Use labels

<router-view></router-view>

Using the tag on the page, it is used to render the matching component.
6. Start routing

var App = Vue.extend({
    
    })
router.start(App, '#app')

router.redirect,
when the application runs for the first time, the right side is blank, and the application usually has a home page, for example: Home page.
Use the router.redirect method to redirect the root path to the /home path:

router.redirect({
    
    
    '/': '/home'
})

Several ways of routing guard -M

There are three types of route guards:
1: Global guards: beforeEach, afterEach, beforeResolve
2: Exclusive guards (hooks in a single route): beforeEnter, beforeLeave
3: In-component guards: beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave
Route guards: just jump in routes The hook function triggered during the process can perform corresponding operations in each hook function, for example, route interception, login verification is required when accessing the page, if you have logged in, it will be displayed directly, and if you have not logged in, it will be displayed on the login page , you can also terminate the routing jump.
Each guard method receives three parameters:
to: Route: the target route object to be entered (to is an object, which is the route object to be entered, and to.path can be used to call the properties in the route object) from: Route:
current The route that the navigation is about to leave
next: Function: This is a method that must be called, and the execution effect depends on the call parameters of the next method

Lazy loading of routes

When building apps in packages, JavaScript bundles can become very large, affecting page load. If we can divide the components corresponding to different routes into different code blocks, and then load the corresponding components when the route is accessed, it will be more efficient.
We can use dynamic import (opens new window) syntax to define code split points (split point)

import('./Foo.vue') // 返回 Promise

Define an async component that can be automatically code split by Webpack:

const router = new VueRouter({
    
    
  routes: [{
    
     path: '/foo', component: Foo }]
})

Chunk components by group:
I want to package all components under a certain route in the same asynchronous chunk. Just use named chunks (opens new window), a special annotation syntax to provide the chunk name (requires Webpack > 2.4). Webpack will combine any async modules with the same chunk name into the same async chunk.

const Foo = () => import(/* webpackChunkName: "group-foo" */ './Foo.vue')
const Bar = () => import(/* webpackChunkName: "group-foo" */ './Bar.vue')
const Baz = () => import(/* webpackChunkName: "group-foo" */ './Baz.vue')