谈谈Vue路由守卫

　　1、路由守卫是什么，简单来说，导航守卫就是路由跳转前、中、后过程中的一些钩子函数，这个函数能让你操作一些其他的事儿，这就是导航守卫。

　　官方解释，vue-router提供的导航守卫主要用来通过跳转或取消的方式守卫导航。

　　2、路由守卫分类 导航守卫分为：全局的、组件内的、单个路由独享三种

　　2.1 全局的 指路由实例上直接操作的钩子函数，他的特点是所有配置路由的组件都会触发 const router = new VueRouter({ ... }) router.beforeEach((to, from, next) => { // ... }) 全局路由的钩子函数包括 beforeEach 在路由跳转前触发，参数包括to,from,next(参数会单独介绍)三个，这个钩子作用主要是用于登录验证 beforeResolve(2.5+) 这个钩子和beforeEach类似，也是路由跳转前触发，参数也是to,from,next三个，与beforeEach的区别参考官网。 afterEach 是在路由跳转完成后触发，参数包括to,from，它发生在beforeEach和beforeResolve之后，beforeRouteEnter(组件内守卫)之前。

　　2.2 路由独享的 指在单个路由配置的时候也可以设置的钩子函数 const router = new VueRouter({ routes: [ { path: '/foo', component: Foo, beforeEnter: (to, from, next) => { // ... } } ] }) 路由独享的钩子函数包括 beforeEnter与全局的beforeEach完全相同，如果都设置则在beforeEach之后紧随执行，参数to、from、next

　　2.3 组件内的 指在组件内执行的钩子函数，类似于组件内的生命周期export default{ data(){ //... }, beforeRouteEnter (to, from, next) { // 在渲染该组件的对应路由被 confirm 前调用 // 不!能!获取组件实例 this // 因为当守卫执行前，组件实例还没被创建 }, beforeRouteUpdate (to, from, next) { // 在当前路由改变，但是该组件被复用时调用 // 举例来说，对于一个带有动态参数的路径 /foo/:id，在 /foo/1 和 /foo/2 之间跳转的时候， // 由于会渲染同样的 Foo 组件，因此组件实例会被复用。

　　而这个钩子就会在这个情况下被调用。 // 可以访问组件实例 this }, beforeRouteLeave (to, from, next) { // 导航离开该组件的对应路由时调用 // 可以访问组件实例 this } ｝ 组件内的路由钩子函数包括 beforeRouteEnter 路由进入组件之前调用，参数包括to，from，next。

　　该钩子在全局守卫beforeEach和独享守卫beforeEnter之后，全局beforeResolve和全局afterEach之前调用，要注意的是该守卫内访问不到组件的实例，也就是this为undefined，也就是他在beforeCreate生命周期前触发。 beforeRouteUpdate 在当前路由改变时，并且该组件被复用时调用，可以通过this访问实例。

　　参数包括to，from，next。 beforeRouteLeave 导航离开该组件的对应路由时调用，可以访问组件实例this，参数包括to，from，next。

　　3、路由守卫回调参数

　　to：目标路由对象;

　　from：即将要离开的路由对象;

　　next：他是最重要的一个参数，他相当于佛珠的线，把一个一个珠子逐个串起来。

声明：本站稿件版权均属千锋教育所有，未经许可不得擅自转载。