Vue 路由守卫是一组钩子函数，提供三种类型：全局守卫在所有路由导航中执行，路由特定守卫特定路由导航时执行，组件内守卫组件导航时执行。可用于验证用户授权、加载数据、重定向页面或显示过渡效果。
Vue 路由守卫
Vue 路由守卫是一组钩子函数，允许你在页面导航时执行特定的操作。这些钩子函数提供了在导航发生之前或之后执行自定义逻辑的机会，以验证用户、加载数据或执行其他任务。
钩子函数:
有三种类型的路由守卫钩子函数：
立即学习“前端免费学习笔记（深入）”；
- 全局守卫：在所有路由导航中执行，无论路由是什么。
- 路由特定守卫：仅在特定路由或一系列路由导航时执行。
- 组件内守卫：单个组件的钩子函数，在组件导航时执行。
使用方式：
-
全局守卫：在
router.js中定义全局守卫。
import VueRouter from 'vue-router'
import { beforeEach, afterEach } from 'vue-router'
// 创建 VueRouter 实例
const router = new VueRouter({
// 路由
})
// 添加全局守卫
router.beforeEach((to, from, next) => {
// 自定义逻辑
})
router.afterEach((to, from) => {
// 自定义逻辑
})-
路由特定守卫：在
routes数组中指定路由特定守卫。
import VueRouter from 'vue-router'
import { beforeEnter } from 'vue-router'
const router = new VueRouter({
routes: [
{
path: '/my-route',
beforeEnter: (to, from, next) => {
// 自定义逻辑
}
}
]
})- 组件内守卫：在组件选项中定义组件内守卫。
import { beforeRouteEnter, beforeRouteUpdate, beforeRouteLeave } from 'vue-router'
export default {
beforeRouteEnter(to, from, next) {
// 自定义逻辑
},
beforeRouteUpdate(to, from, next) {
// 自定义逻辑
},
beforeRouteLeave(to, from, next) {
// 自定义逻辑
}
}常见用法：
- 验证用户授权
- 加载数据
- 重定向到其他页面
- 显示过渡效果
