在Vue.js中，当使用Vue Router进行页面路由管理时，你可以利用路由守卫（Route Guards）来实现路由的钩子函数。这些钩子函数允许你在路由发生变化时执行一些代码，比如权限验证、页面加载前的数据预获取等。Vue Router 提供了全局守卫、路由独享的守卫以及组件内的守卫。
1. 全局守卫
- beforeEach：全局前置守卫，在路由跳转前触发，每个路由跳转都会经过这个守卫。
- beforeResolve：在解析守卫之后调用，即在所有嵌套路径的组件内守卫和异步组件被解析之后调用。
- afterEach：全局后置钩子，路由跳转后触发，不接受 next 函数，也不会改变导航本身。
2. 路由独享的守卫
- beforeEnter：在路由配置中直接定义，进入路由前调用，参数为 to, from, next。
3. 组件内的守卫
- beforeRouteEnter ：在渲染该组件的对应路由被 confirm 前调用，此时组件实例还没被创建，不能获取组件实例
this。可以通过传一个回调给next来访问组件实例。 - beforeRouteUpdate (2.2+)：在当前路由改变，但是该组件被复用时调用，例如，对于一个带有动态参数的路径
/foo/:id，在/foo/1和/foo/2之间跳转的时候，由于会渲染同样的Foo组件，因此这个守卫就被调用，而不是销毁后重新创建。 - beforeRouteLeave ：导航离开该组件的对应路由时调用，可以访问组件实例
this。
示例
全局前置守卫 beforeEach
|—|————————————————————————-|
| | router.beforeEach((to, from, next) => { |
| | // 权限验证等逻辑 |
| | if (to.name !== 'Login' && !isAuthenticated) next({ name: 'Login' }) |
| | else next() |
| | }) |
组件内的守卫 beforeRouteEnter
|—|—————————————-|
| | export default { |
| | beforeRouteEnter (to, from, next) { |
| | // 在渲染该组件的对应路由被 confirm 前调用 |
| | // 不！能！获取组件实例 `this` |
| | // 因为当守卫执行前，组件实例还没被创建 |
| | next(vm => { |
| | // 通过 `vm` 访问组件实例 |
| | }) |
| | } |
| | } |
组件内的守卫 beforeRouteLeave
|—|——————————————————————————————–|
| | export default { |
| | beforeRouteLeave (to, from, next) { |
| | // 导航离开该组件的对应路由时调用 |
| | // 可以访问组件实例 `this` |
| | const answer = window.confirm('Do you really want to leave? you have unsaved changes!') |
| | if (answer) { |
| | next() |
| | } else { |
| | next(false) |
| | } |
| | } |
| | } |
路由守卫是Vue Router中非常强大的功能，能够让你对路由的导航过程进行精细的控制。
原文链接: https://blog.csdn.net/hexadecimal_001/article/details/140506468