路由独享守卫
写在每个路由配置的对象里
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>
