Vue2.0 routing hook function

Article reference

https://router.vuejs.org/zh-cn/advanced/navigation-guards.html

 

Navigation hook function

import View from 'view'
import Router from 'vue-router'

/*front page*/
import zpIndex from '../page/index/zpIndex.vue'

Vue.use(Router)

var router = new Router({
    linkActiveClass: 'open active',
    scrollBehavior: () => ({y: 0}),
    routes: [
        {
            path: '/',
            redirect: '/zpIndex' //Route redirection
        },
        // front page
        {
            path: '/zpIndex',
            name: 'zpIndex',
            component: zpIndex,
            beforeEnter: (to, from, next) => {
                console.log("beforeEnter")
                next(true);
            },
            beforeLeave (to, from, next) {
                // Called when navigating away from the component's corresponding route
                // Can access the component instance `this`
                console.log("beforeLeave")
                next(true);
            }
        },

    ]
});
// global routing control
router.beforeEach((to, from, next) => {
    console.dir(from);
    console.log("to : " + to);
    console.dir(to);
    // Make sure to call the next method, otherwise the hook will not be resolved.
    next(true);
});
// global routing control
router.afterEach(route => {
    console.dir(arguments);
})

export default router;

 

• to: Route: the target route object to be entered
• from: Route: The route that the current navigation is leaving
• next: Function: Be sure to call this method to resolve this hook. The execution effect depends on the call parameters of the next method.
  • next(): Proceed to the next hook in the pipeline. If all hooks are executed, the state of the navigation is confirmed.
  • next(false): Abort the current navigation. If the browser's URL is changed (either manually by the user or by the browser's back button), then the URL address will be reset to the address corresponding to the from route.
  • next('/') or next({ path: '/' }): Jump to a different address. The current navigation is interrupted and a new one is made.