Vue3-37-路由-组件内的路由守卫 onBeforeRouteLeave 和 onBeforeRouteUpdate

简介

组件内的路由守卫，实际上就是两个 API 方法。
他们与普通的守卫不同的是 ： 他们是写在组件内的，在组件中监听路由的变化，不是全局的，比较灵活。
以下是两个 API 的功能说明：

onBeforeRouteLeave() : 守卫在当前路由离开时触发，例如 ：从 /c 跳转到 /a

onBeforeRouteUpdate(): 守卫在当前路由发生改变时触发,例如 ： 从 /c/100 跳转到 /c/200

案例

本案例演示上述两个 API 的基本使用，没有太多的逻辑操作。

路由配置

// 导入 定义路由的两个方法
import {
   createRouter,createWebHistory}  from 'vue-router'

// 引入组件