Route Navigation hook

Role: interception navigation, complete the jump or cancel.

Three ways:

1. Global Navigation hook

2, a single route exclusive

3, the components of the navigation hook

 

1, global navigation hook:

// global front guard 
var Router = new new VueRouter ({...}); 

router.beforeEach ((to, from, Next) => { 
// to the target route 
@ route from leaving @ next () to enter the route // Next (to false) interrupt, to enter, reset back from // Next ( '/') == Next ({path: '/'}), the current interruption, jumping go / // Next (error), while being terminated, an error is thrown 
}); // global rear hook 
router.afterEach ((to, from) => { 
})







    

2. Hook exclusive single route

var Router = new new VueRouter ({ 
    routes: [{ 
        path: '' , 
        Component: '' , 
        beforeEnter: (to, from, Next) => {
             // for a route navigation of the hook, and the use of the same global hook 
        } 
    } ] 
});

3, the components of the navigation hook

beforeRouteEnter (to, from, Next) {
     // At this point component instance has not been created, can not obtain the this 
    Next (VM => {
     // through access component instance `vm` 
  }) 
} 
beforeRouteUpdate (to, from, Next) { 
    // at this time, access to the this 
    // in the route change, but the route is called when multiplexed 
    // / foo /. 1 and between the skip / foo / 2 time, / foo components will be multiplexed, but this time can get to id 1 and 2 
} 

 beforeRouteLeave (to, from, Next) { 
    // called when the navigation route of the assembly away from the corresponding 
    // access component instance this` ` 
  }