招远网站建设多少钱/搜索引擎优化服务

前言:

前不久项目中参与了一个关于消息的模块，在编辑消息中点到其他菜单时，想加一个切换菜单则丢失当前编辑的判断，这也是很基本的操作，基本在带编辑的逻辑都应该添加这样的判断。经过百度知道了这个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 navigationreturn 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>