vue-router全局有三个守卫:
作者:OBKoro1
链接:https://juejin.cn/post/6844903641866829838
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
- router.beforeEach 全局前置守卫 进入路由之前
- router.beforeResolve 全局解析守卫在beforeRouteEnter调用之后调用
- router.afterEach 全局后置钩子 进入路由之后
- 全局守卫 // main.js 入口文件
- import router from './router'; // 引入路由
router.beforeEach((to, from, next) => {
next();
});
router.beforeResolve((to, from, next) => {
next();
});
router.afterEach((to, from) => {
console.log('afterEach 全局后置钩子');
}); -
to,from,next 这三个参数:
to和from是将要进入和将要离开的路由对象,路由对象指的是平时通过this.$route获取到的路由对象。
next:Function 这个参数是个函数,且必须调用,否则不能进入路由(页面空白)。
-
next() 进入该路由。
-
next(false): 取消进入路由,url地址重置为from路由地址(也就是将要离开的路由地址)。
-
next 跳转新路由,当前的导航被中断,重新开始一个新的导航。
-
路由独享守卫
const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // 参数用法什么的都一样,调用顺序在全局前置守卫后面,所以不会被全局守卫覆盖 // ... } } ]
作者:OBKoro1
链接:https://juejin.cn/post/6844903641866829838
来源:稀土掘金
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。