What is route guard ？

It can be simply understood as the of routing components ’ Guard ’, In the process of entering a route, you must first leave your guard , Guards through other routes can access other routes .

Global route guard

Guard routes configured globally , All route navigation will be affected by the global route guard

• Global front route guard
  In the process of routing and navigation , The page will enter the pre routing guard before jumping
  Triggered before route switching , You can control the switching behavior of the route

beforeEach(to, from, next){}

      Parameters ： to  The information of the target route of the handover is saved 
          from  Save the information of the starting route of switching 
          next  Control whether route navigation switching is blocked 

• Global post route guard

  Post routing guard , Triggered after route navigation switching , It can be triggered after the route switching is successful , No need to switch next
  afterEach(to, from){}

     Parameters  to  The information of the target route of the handover is saved 
          from  Save the information of the starting route of switching 
  

• The global routing guard can be combined with meta Use
  meta {} Save user-defined information in the form of key value pairs , It can be used with routing guard

Exclusive routing guard

beforeEnter(to, from, next){}
Use in a separate routing configuration , Control routing behavior separately , Similar to the global pre routing guard

test — Verification is required to jump to the specified route token, If not, intercept

import Router from 'vue-router';

import Vue from 'vue';

Vue.use(Router);

const routes = [{
    
    path: '/',
    name: 'index',
    component: () => import('../views/index'),

    //  Establish routing rules 
    meta: {
     isA: false }

}, {
    
    path: '/about',
    name: 'about',
    component: () => import('../views/about'),

    meta: {
     isA: true }
}, {
    
    path: '/self',
    name: 'self',
    component: () => import('../views/self'),

    meta: {
     isA: false }
}, {
    
    path: '/route',
    name: 'route',
    component: () => import('../views/route'),
    meta: {
     isA: false },
    //  Route exclusive guard 
    // brforeEnter(to, from, next) {
    
    // console.log(to, from, next());
    // //  This route has separate verification rules 
    // },
}]


const router = new Router({
    
    mode: 'history',
    routes,
})

//  Global front route guard 

//  example  - --  If not token You can't jump 
router.beforeEach((to, from, next) => {
    
    // console.log(to, from, to.meta.isA);

    //  Intercept according to the route 
    if (to.meta && to.meta.isA) {
    

        //  To determine if there is token, If not, intercept and jump 
        if (!localStorage.getItem('token')) {
    
            alert(' No authority ')
            return;
        }

        next();

    } else {
    
        next()
    }
});


//  Global post route guard 
router.afterEach((to, from) => {
    

    console.log(to, from);

    document.title = to.name;
});

export default router;

Intercept

After a successful jump
You can change the corresponding title

Component guard

Similar to the use of global routing guard , However, this guard is only for a single component

	 Enter the component guard --- Trigger before entering the component 
    beforeRouteEnter(to, from, next){}

     Leave the component guard --- Trigger after leaving the component 
    beforeRouteLeave(to, from, next){}

• test

export default {
    
  name: "Route",
  //  Component guard ---- Trigger when entering the component --- The hook triggers before the lifecycle 
  beforeRouteEnter(to, from, next) {
    
    console.log(" Enter the assembly ");
    next();
  },

  //  Component guard --- Triggered when leaving the component --- Before the hook is about to be destroyed (beforedestroy) Trigger 
  beforeRouteLeave(to, from, next) {
    
    console.log(" Leave component ");
    next();
  },

  beforeMount() {
    
    console.log(" Life cycle beforeMount");
  },

  mounted() {
    
    console.log(" Life cycle mounted");
  },

  deactivated() {
    
    console.log(" Life cycle deactivated");
  },

  activated() {
    
    console.log(" Life cycle activated");
  },

  beforeCreate() {
    
    console.log(" Life cycle beforeCreate");
  },

  beforeDestroy() {
    
    console.log(" Life cycle beforeDestroy");
  },

  destroyed() {
    
    console.log(" Life cycle destroyed");
  },

Entering and leaving components route