Vue-router 2.0 Common basic knowledge points of navigation hook _vue2.0

Navigation hooks

The navigation hooks provided by Vue-router are primarily used to intercept navigation, allowing it to complete jumps or cancellations. There are several ways to perform a hook when routing navigation occurs: Global, single route exclusive, or component level. HTTP://WWW.JIANSHU.COM/P/F375D84C1D4B Global Hook

Const ROUTER = new Vuerouter ({...})
Router.beforeeach (to, from, next) => {
    //do something 
    next ();
});

Router.aftereach (to, from, next) => {
    console.log (to.path);
});

Each hook method receives three parameters:
To:route: Upcoming destinations [routed objects]
From:route: The route that the current navigation is going to leave
Next:function: Be sure to call this method to resolve this hook. Execution effect depends on next
The invocation parameters of the method.
Next (): The next hook in the pipeline. If all hooks are finished, the navigation status is confirmed (confirmed).
Next (false): interrupts the current navigation. If the URL of the browser changes (possibly a user manual or browser back button), the URL address is reset to the From
The address to which the route corresponds.
Next ('/') or next ({path: '/'}): Jump to a different address. The current navigation is interrupted, and then a new navigation is made.

Make sure to call the next method, otherwise the hook will not be resolved. Hooks inside a component

 Let Frompath = '; export default{beforerouteenter (to, from, next) {//call before rendering the corresponding route of the component confirm No. Yes.
         Gets the component instance ' this '//because the component instance has not been created before the hook executes frompath = From.path;
    Next (); },
}