首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue3路由组件内路由守卫onBeforeRouteLeave和onBeforeRouteUpdate
Vue3路由组件内的路由守卫onBeforeRouteLeave和onBeforeRouteUpdate使用
作者:NorthCastle
这篇文章主要介绍了Vue3路由组件内的路由守卫onBeforeRouteLeave和onBeforeRouteUpdate使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
简介
组件内的路由守卫,实际上就是两个 API 方法。
他们与普通的守卫不同的是 : 他们是写在组件内的,在组件中监听路由的变化,不是全局的,比较灵活。
以下是两个 API 的功能说明:
onBeforeRouteLeave()
: 守卫在当前路由离开时触发,例如 :从 /c 跳转到 /aonBeforeRouteUpdate()
: 守卫在当前路由发生改变时触发,例如 : 从 /c/100 跳转到 /c/200
案例
本案例演示上述两个 API 的基本使用,没有太多的逻辑操作。
路由配置
// 导入 定义路由的两个方法 import {createRouter,createWebHistory} from 'vue-router' // 引入组件 import componentA from "./componentA.vue"; import componentC from "./componentC.vue"; // 声明路由跳转的路径与组件的对应关系 const routsList = [ {path:'/a',name:'aroute',component:componentA}, { path:'/c/:id', name:'croute', component:componentC } ] // 创建路由的实例对象 const routerConfigObj = createRouter({ history:createWebHistory('abc'), // 带一个参数,表示是路由的一个前缀 routes:routsList // 指定路由的配置列表 }) // 导出路由的对象 export default routerConfigObj;
组件C 中的API 使用代码(核心)
<template> <div class="divb"> 这是组件C <br> <button @click="goToA">跳转到组件a</button> <br> <button @click="goToC200">更新到组件c200</button> </div> </template> <script setup lang="ts"> // 引入路由相关的 API import {useRouter} from 'vue-router'; // 声明 路由对象和当前路由对象 const routeObj = useRouter() // 点击按钮,跳转到组件a const goToA = ()=>{ routeObj.push({ path:'/a' }) } // 更新到组件c 200 const goToC200 = ()=>{ routeObj.push({ path:'/c/200' }) } // 导入两个组件内的路由守卫API import { onBeforeRouteLeave,onBeforeRouteUpdate } from 'vue-router'; // 路由离开时的操作 onBeforeRouteLeave((to,from)=>{ console.log('组件c : onBeforeRouteLeave - to :',to); console.log('组件c : onBeforeRouteLeave - from :',from); alert('当前内容未保存,是否继续离开?') }) // 路由更新时的操作 onBeforeRouteUpdate((to,from)=>{ console.log('组件c : onBeforeRouteUpdate - to :',to); console.log('组件c : onBeforeRouteUpdate - from :',from); alert('即将跳转到 /c/200,请稍等') }) </script> <style scoped> .divb{ width: 200px; height: 100px; background: rgb(23, 177, 182); } </style>
运行效果1:路由跳转
运行效果2:路由更新
总结
以上就是 组合式API 中的 两个组件内的 路由守卫的操作。
这些仅为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。