Vue Router 路由钩子/路由守卫

文章目录

简介
全局钩子
路由独享的钩子
组件内的钩子
- [Vue 2 (Vue Router 3) 中](#Vue 2 (Vue Router 3) 中)
- [Vue 3 (Vue Router 4)中](#Vue 3 (Vue Router 4)中)

简介

Vue Router 提供了路由钩子（Route Hooks），允许你在路由发生变化时执行一些操作。

这些钩子可以在路由进入、离开等关键时刻触发，从而实现一些特定的功能，比如页面权限控制、数据预加载等。

路由守卫简单来讲就是监听页面进入，修改，和离开的功能。

每个守卫接受三个参数：

to：即将要进入的路由对象
from：当前导航正要离开的路由
next：一定要调用该方法来 resolve 这个钩子。执行效果依赖 next 方法的调用参数。

关于 next ：

next()：进行管道中的下一个钩子。如果全部钩子执行完了，则导航的状态就是 confirmed （确认的）。
next(false)：中断当前的导航。如果浏览器的 URL 改变了（可能是用户手动或浏览器后退按钮），那么 URL 地址会重置到 from 路由对应的地址。
next('/') 或 next({ path: '/' })：跳转到一个不同的地址。当前的导航被中断，然后进行一个新的导航。
next(error)：(2.4.0+) 如果传入 next 的参数是一个 Error 实例，则导航会被终止且该错误会被传递给 router.onError() 注册过的回调。

Vue Router 的路由钩子主要分为三类：

全局钩子
路由独享的钩子
组件内的钩子

全局钩子

全局钩子对整个路由实例都有效，它们主要有两个：beforeEach 和 afterEach。

beforeEach：在路由跳转前触发，常用于判断用户是否登录、是否有权限访问某个页面等。
afterEach：在路由跳转后触发，通常用于一些清理工作或者页面跳转后的通知。

js 复制代码

const router = new VueRouter({ /* ... */ }); 
  
router.beforeEach((to, from, next) => {  
  // 逻辑判断...  
  next() // 确保要调用 next() 方法，否则路由不会跳转  
})  
  
router.afterEach((to, from) => {  
  // 路由跳转后的操作...  
})

路由独享的钩子

可以在路由配置中直接定义 beforeEnter 钩子，它只会在进入该路由时触发。

js 复制代码

const router = new VueRouter({  
  routes: [  
    {  
      path: '/foo',  
      component: Foo,  
      beforeEnter: (to, from, next) => {  
        // 逻辑判断...  
        next()  
      }  
    }  
  ]  
})

组件内的钩子

在 Vue 组件中，你可以使用以下路由钩子：beforeRouteEnter、beforeRouteUpdate（2.2+ 新增）、beforeRouteLeave。

beforeRouteEnter：在路由进入该组件的渲染函数之前调用，此时组件实例尚未创建，因此无法访问 this。可以通过 next 的回调函数来访问组件实例。
beforeRouteUpdate ：当同一个路由重新渲染时调用，例如，对于带有动态参数的路由 /foo/:id，当 :id 发生变化时，该组件会被重新渲染。
beforeRouteLeave：在导航离开该组件的对应路由时调用。

Vue 2 (Vue Router 3) 中

js 复制代码

export default {  
  data() {  
    return {  
      // ...  
    }  
  },  
  beforeRouteEnter(to, from, next) {  
    // 组件尚未创建，无法访问 `this`  
    next(vm => {  
      // 访问组件实例 `vm`  
    })  
  },  
  beforeRouteUpdate(to, from, next) {  
    // 当前路由改变，但组件复用时调用  
    // 例如，对于带查询参数或动态段的路由 `/foo?a=1` 或者 `/foo/1`，  
    // 组件实例会被复用，此时这个钩子会被调用  
    this.someData = 'new data'  
    next()  
  },  
  beforeRouteLeave(to, from, next) {  
    // 导航离开该组件的对应路由时调用  
    // 可以访问组件实例 `this`  
    const answer = window.confirm('你确定要离开吗？')  
    if (answer) {  
      next()  
    } else {  
      next(false) // 取消导航  
    }  
  }  
}

Vue 3 (Vue Router 4)中

组件内钩子的使用方式在 Vue 3 中没有显著变化，但如果你使用 Composition API，你可能会更倾向于使用 onBeforeRouteEnter、onBeforeRouteUpdate 和 onBeforeRouteLeave 函数，这些函数可以与 setup 函数一起使用。

js 复制代码

import { onBeforeRouteEnter, onBeforeRouteUpdate, onBeforeRouteLeave } from 'vue-router';  
  
export default {  
  setup() {  
    onBeforeRouteEnter((to, from, next) => {  
      next(vm => {  
        // 访问组件实例  
      });  
    });  
  
    onBeforeRouteUpdate((to, from, next) => {  
      // ...当前路由改变，但组件复用时调用  
      next();  
    });  
  
    onBeforeRouteLeave((to, from, next) => {  
      // ...导航离开该组件的对应路由时调用  
      next();  
    };  
  
    // ...其他 Composition API 逻辑  
  }  
};

vue-router 3.x	vue-router 4.x
beforeRouteEnter	onBeforeRouteEnter
beforeRouteUpdate	onBeforeRouteUpdate
beforeRouteLeave	onBeforeRouteLeave