vue2的路由守卫（钩子函数），路由死循环怎么解决？

to和from是将要进入和将要离开的路由对象,路由对象指的是平时通过this.$route获取到的路由信息配置对象，比如path传参this.$route.query接收。

next:Function 这个参数是个函数，且必须调用，否则不能进入路由(页面空白)。

• next() 进入该路由。

• next(false): 取消进入路由，url地址重置为from路由地址(也就是将要离开的路由地址)。

• next 跳转新路由，当前的导航被中断，重新开始一个新的导航。

我们可以这样跳转：next(‘path地址’)或者next({path:‘’})或者next({name:‘’})

且允许设置诸如 replace: true、name: ‘home’ 之类的选项

以及你用在router-link或router.push的对象选项。

路由独享守卫

如果你不想全局配置守卫的话，你可以为某些路由单独配置守卫，写在路由配置里

const router = new VueRouter({

routes: [

{

path: ‘/foo’,

component: Foo,

beforeEnter: (to, from, next) => {

// 参数都一样

}

}

]

})

路由组件内的守卫：

1. beforeRouteEnter 进入路由前

2. beforeRouteUpdate 路由复用同一个组件时

3. beforeRouteLeave 离开当前路由时

三个钩子函数

beforeRouteEnter (to, from, next) {

// 在路由独享守卫后调用 不能获取组件实例 this，组件实例还没被创建

},

beforeRouteUpdate (to, from, next) {

// 在当前路由改变，但是该组件被复用时调用 可以访问组件实例 this

// 可以用来接收动态路由传过来的参数

// 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候，

// 由于会渲染同样的 Foo 组件，因此组件实例会被复用。而这个钩子就会在这个情况下被调用。

},

beforeRouteLeave (to, from, next) {

// 导航离开该组件的对应路由时调用，可以访问组件实例 this

}

beforeRouteEnter访问this

因为钩子在组件实例还没被创建的时候调用，所以不能获取组件实例 this，可以通过传一个回调给next来访问组件实例 。

但是回调的执行时机在mounted后面,所以在我看来这里对this的访问意义不太大，可以放在created或者mounted里面。

beforeRouteEnter (to, from, next) {

console.log(‘在路由独享守卫后调用’);

next(vm => {

// 通过 vm 访问组件实例 this 执行回调的时机在mounted后面，

})

}

beforeRouteLeave：

导航离开该组件的对应路由时调用，我们用它来禁止用户离开，比如还未保存草稿，或者在用户离开前，将setInterval销毁，防止离开之后，定时器还在调用。

beforeRouteLeave (to, from , next) {

if (文章保存) {

next(); // 允许离开或者可以跳到别的路由 上面讲过了

} else {

next(false); // 取消离开

}

}

关于钩子的一些知识：

路由钩子函数的错误捕获

如果我们在全局守卫/路由独享守卫/组件路由守卫的钩子函数中有错误，可以这样捕获：

router.onError(callback => {

// 2.4.0新增 并不常用，了解一下就可以了

console.log(callback, ‘callback’);

});

最后

小编综合了阿里的面试题做了一份前端面试题PDF文档，里面有面试题的详细解析

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

虽只说了一个公司的面试，但我们可以知道大厂关注的东西并举一反三，通过一个知识点延伸到另一个知识点，这是我们要掌握的学习方法，小伙伴们在这篇有学到的请评论点赞转发告诉小编哦，谢谢大家的支持！