前言:
前不久项目中参与了一个关于消息的模块,在编辑消息中点到其他菜单时,想加一个切换菜单则丢失当前编辑的判断,这也是很基本的操作,基本在带编辑的逻辑都应该添加这样的判断。经过百度知道了这个onBeforeRouteLeave,vue-router的一个组合式api,就是可以在路由跳走之前添加一些逻辑,比方说添加一个条件判断,满足条件再跳转路由。
路由导航守卫:
后来慢慢的了解到这玩意的专业名词叫路由守卫。官方解释是这样的:vue-router 提供的导航守卫主要用来通过跳转或取消的方式守卫导航。
分类:
- 全局守卫
//一般用于控权,比如用户没登录就跳转登录页面之类
router.beforeEach((to, from, next) => {
// console.log("全局前置");
next(); //执行跳转
});
//因为它在 每次导航时都会触发,但是确保在导航被确认之前,同时在所有组件内守卫和异步路由组件被解析之后,解析守卫就被正确调用。
router.beforeResolve((to) => {
console.log("解析守卫");
});
//不会接受 next 函数也不会改变导航本身:它们对于分析、更改页面标题、声明页面等辅助功能以及许多其他事情都很有用。它们也反映了 navigation failures 作为第三个参数:
router.afterEach(() => {
// console.log("后置守卫");
});
- 路由独享守卫(就是给一个路由做处理)
const routes = [
{
path: '/users/:id',
component: UserDetails,
beforeEnter: (to, from) => {
// reject the navigation
return false
},
},
]
- 组件内守卫
<script setup lang="ts">
import {
onBeforeRouteLeave,
onBeforeRouteUpdate,
// beforeRouteEnter,找不到模块
} from "vue-router";
onBeforeRouteLeave((to, from, next) => {
console.log(to, from, next);
const answer = window.confirm(
'Do you really want to leave? you have unsaved changes!'
)
// 取消导航并停留在同一页面上
if (!answer) return false
});
//了解
onBeforeRouteUpdate(() => {
console.log("onBeforeRouteUpdate");
});
</script>