导航守卫
原创...大约 2 分钟
正如其名,vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。这里有很多方式植入路由导航中:全局的,单个路由独享的,或者组件级的
全局前置守卫
你可以使用 router.beforeEach
注册一个全局前置守卫,当一个导航触发时,就会触发全局前置守卫
router.beforeEach((to, from, next) => {
if(token){
next()
}else{
next({
path: "/login"
}) // 或者 return false
}
})
全局解析守卫
你可以用 router.beforeResolve
注册一个全局守卫。这和 router.beforeEach
类似
router.beforeResolve((to,from,next) => {
next()
})
全局后置守卫
你可以直接在路由配置上定义 beforeEnter
守卫,在导航结束之后触发
router.afterEach((to,from) => {
})
路由独享守卫
你可以直接在路由配置上定义 beforeEnter
守卫,beforeEnter
守卫 只在进入路由时触发
{
name: "List",
path: "/list",
component: List,
beforeEnter:(to,from) => {
return true;
}
}
组件内的守卫
你可以在路由组件内直接定义路由导航守卫
- beforeRouteEnter
- beforeRouteUpdate
- beforeRouteLeave
<template>
<p>home</p>
<button @click="jump">跳转</button>
</template>
<script setup lang="ts">
import { ref } from 'vue'
import { useRouter, onBeforeRouteLeave, onBeforeRouteUpdate } from "vue-router"
const router = useRouter()
const jump = () => {
router.push("/about")
}
onBeforeRouteLeave((to, from) => { // 与 beforeRouteLeave 相同
const answer = window.confirm(
'确定要离开此页吗?'
)
// 取消导航并停留在同一页面上
if (!answer) return false
})
onBeforeRouteUpdate(async (to, from) => { // 与 beforeRouteUpdate 相同,无法访问 `this`
})
</script>
完整的导航解析流程
- 导航被触发。
- 在失活的组件里调用
beforeRouteLeave
守卫。 - 调用全局的
beforeEach
守卫。 - 在重用的组件里调用
beforeRouteUpdate
守卫(2.2+)。 - 在路由配置里调用
beforeEnter
。 - 解析异步路由组件。
- 在被激活的组件里调用
beforeRouteEnter
。 - 调用全局的
beforeResolve
守卫(2.5+)。 - 导航被确认。
- 调用全局的
afterEach
钩子。 - 触发 DOM 更新。
- 调用
beforeRouteEnter
守卫中传给 next 的回调函数,创建好的组件实例会作为回调函数的参数传入
Powered by Waline v2.15.7