大家好，我是csdn的博主：lqj_本人
这是我的个人博客主页：
lqj_本人_python人工智能视觉（opencv）从入门到实战,前端,微信小程序-CSDN博客
最新的uniapp毕业设计专栏也放在下方了：
https://blog.csdn.net/lbcyllqj/category_12346639.html?spm=1001.2014.3001.5482
平时我也会在哔哩哔哩视频中讲解一些大家平时用得到的东西，
哔哩哔哩欢迎关注：
目录
全局前置守卫
全局前置守卫通常用来做权限控制，使用 router.beforeEach 即可添加：
javascript
const router = createRouter({ ... })
router.beforeEach((to, from) => {
// ...
// 返回 false 以取消导航
return false
})每个守卫方法接收两个参数：
to：即将进入的目标路由from：当前正要离开的路由
可以返回的值如下:
false：取消当前的导航。true或undefined，调用下一个守卫。- 一个路由地址：字符串或对象。表示中断当前导航，进行一个新的导航。
javascript
router.beforeEach(async (to, from) => {
// 检查用户是否已登录，并且避免无限重定向
if (!isAuthenticated && to.name !== 'Login') {
return { name: 'Login' } // 将用户重定向到登录页面
}
})在之前的 Vue Router 版本中，也是可以使用第三个参数 next 的。目前，它仍然是被支持的，这意味着你可以向任何导航守卫传递第三个参数。在这种情况下，要确保 next 在导航守卫中只被调用一次。
全局解析守卫
router.beforeResolve 用法和 router.beforeEach 类似。它是在导航被确认之前，所有组件内守卫和异步路由组件被解析之后被调用。下面这个例子，确保用户可以访问自定义 meta 属性：
javascript
router.beforeResolve(async to => {
if (to.meta.requiresCamera) {
try {
await askForCameraPermission()
} catch (error) {
if (error instanceof NotAllowedError) {
// ... 处理错误，然后取消导航
return false
} else {
// 意料之外的错误，取消导航并把错误传给全局处理器
throw error
}
}
}
})router.beforeResolve 是获取数据或执行任何其他操作（进入所有页面后都执行的操作）的理想位置。
全局后置钩子
和守卫不同的是，全局后置钩子不接受 next 函数，也不能跳转到其他的路由地址：
javascript
router.afterEach((to, from) => {
sendToAnalytics(to.fullPath)
})但它可以接收 failure 作为第三个参数：
javascript
router.afterEach((to, from, failure) => {
if (!failure) sendToAnalytics(to.fullPath)
})router.afterEach 对于访问分析、更改页面标题、声明页面等辅助功能都很有帮助。
路由独享的守卫
我们可以直接在路由配置上定义 beforeEnter 守卫：
javascript
const routes = [
{
path: '/users/:id',
component: UserDetails,
beforeEnter: (to, from) => {
// 取消导航
return false
},
},
]beforeEnter 守卫只在进入路由时触发，不会在 params、query 或 hash 改变时触发。例如，从 /users/2 进入到 /users/3 或者从 /users/2#info 进入到 /users/2#projects 不会触发。
我们也可以将一个函数数组传递给 beforeEnter，这在为不同的路由重用守卫时很有用：
javascript
// 清除 query 参数
function removeQueryParams(to) {
if (Object.keys(to.query).length)
return { path: to.path, query: {}, hash: to.hash }
}
// 清除 hash 值
function removeHash(to) {
if (to.hash) return { path: to.path, query: to.query, hash: '' }
}
const routes = [
{
path: '/users/:id',
component: UserDetails,
beforeEnter: [removeQueryParams, removeHash]
},
{
path: '/about',
component: UserDetails,
beforeEnter: [removeQueryParams]
}
]当然，你也可以通过使用路由的 meta 属性和 全局导航守卫 来实现以上功能。
组件内的守卫
使用声明式 API ，你可以为组件添加以下守卫：
beforeRouteEnterbeforeRouteUpdatebeforeRouteLeave
beforeRouteEnter 守卫不能访问 this，因为此时组件还没有被创建。你可以通过传一个回调给 next 来访问组件实例。在导航被确认的时候执行回调，并且把组件实例作为回调方法的参数：
javascript
beforeRouteEnter (to, from, next) {
next(vm => {
// 通过 `vm` 访问组件实例
})
}注意：beforeRouteEnter 是支持 next 传递回调函数的唯一守卫。
beforeRouteUpdate 在当前路由改变，但是该组件被复用时调用。比如，对于一个带有动态参数的路径 /users/:id，在 /users/1 和 /users/2 之间跳转的时候被调用。因为这种情况发生的时候，组件已经挂载好了，导航守卫可以访问组件实例 this。
javascript
beforeRouteUpdate (to, from) {
// 可以使用 this
this.name = to.params.name
}beforeRouteLeave 通常用来预防用户在还未保存修改前突然离开。该守卫可以通过返回 false 来取消导航。
javascript
beforeRouteLeave (to, from) {
const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
// 取消导航并停留在当前页面
if (!answer) return false
}使用组合式 API，你可以为组件添加 onBeforeRouteUpdate 、onBeforeRouteLeave 导航守卫：
javascript
<script setup lang="ts">
import { ref } from 'vue'
import { onBeforeRouteLeave, onBeforeRouteUpdate } from 'vue-router'
const userData = ref()
onBeforeRouteUpdate(async (to, from) => {
//仅当 id 更改时才获取用户信息
if (to.params.id !== from.params.id) {
userData.value = await fetchUser(to.params.id)
}
})
onBeforeRouteLeave((to, from) => {
const answer = window.confirm('Do you really want to leave? you have unsaved changes!')
// 取消导航并停留在当前页面
if (!answer) return false
})
</script>注意：由于 setup 函数调用时机的问题，使用组合式 API 不存在 onBeforeRouteEnter。