本文主要是介绍今日讲讲导航守卫，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
导航守卫就是路由跳转过程中的一些钩子函数，比如制作登录权限验证
导航守卫有三种： 全局的 , 单个路由独享的 , 组件级的 。
目录
路由独享守卫
路由独享守卫
写在每个路由配置的对象里
beforeEnter 进入前；应用场景：某个页面有单独的权限限制
不传或true代表允许通过
false代表不允许通过
字符串或对象，代表重定向到某一页面{
path: '/about',
name: 'about',
component: about,
beforeEnter: (to, from) => {
return '/login';
}
},全局守卫
写在路由实例上
beforeEach 进入前；应用场景：登录拦截
router.beforeEach((to, from) => {
// 获取uid等判断依据数据
let uid = 10
// 判断去的页面不是登录页且uid不存在
if (uid) {
if (to.path == '/login') {
// 如果登录了，且去的是登录页，重定向到首页
return '/'
} else {
return '/login';
}
}
}) beforeResolve 解析守卫，在所有组件内守卫和异步路由组件被解析之后调用
afterEach 后置守卫，对于分析、更改页面标题、声明页面、记录日志
组件级守卫
写在页面中
onBeforeRouteEnter 进入前
onBeforeRouteUpdate 在当前路由改变，但是该组件被复用时调用
onBeforeRouteLeave 在导航离开渲染该组件的对应路由时调用；可以在离开前进行校验
<script setup>
import { useRouter, onBeforeRouteLeave } from 'vue-router'
onBeforeRouteLeave(() => {
const answer = window.confirm(
'你真的想离开吗？您有未保存的更改!'
)
// 取消导航并停留在同一页面上
if (!answer) return false
})
</script>这篇关于今日讲讲导航守卫的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
