vue-router 2.0 钩子函数

2018-05-04  本文已影响0人  milletmi

vue-router 提供的导航钩子主要用来拦截导航,让它完成跳转或取消。有多种方式可以在路由导航发生时执行钩子:全局的, 单个路由独享的, 或者组件级的。
记住参数或查询的改变并不会触发进入/离开的导航守卫。你可以通过观察 $route 对象来应对这些变化,或使用 beforeRouteUpdate 的组件内守卫。

const router = new VueRouter({ ... })
router.beforeEach((to, from, next) => {
    // do something 
    next();
});

router.afterEach((to, from, next) => {
    console.log(to.path);
});

当一个导航触发时,全局前置守卫按照创建顺序调用。守卫是异步解析执行,此时导航在所有守卫 resolve 完之前一直处于 等待中

每个守卫方法接收三个参数:

确保要调用 next 方法,否则钩子就不会被 resolved。

上一篇 下一篇

猜你喜欢

热点阅读