vue3?修改路由中的meta屬性
有些時(shí)候可能需要在路由跳轉(zhuǎn)前后修改meta里面的相關(guān)屬性值，這個(gè)時(shí)候就需要使用鉤子函數(shù)（路由守衛(wèi)），鉤子函數(shù)有全局鉤子，局部組件鉤子函數(shù)以及路由配置里面的鉤子函數(shù) （這些也叫路由守衛(wèi)）
1.全局鉤子函數(shù)：beforeEach()
在Vue Router中，beforeEach是用于注冊(cè)全局前置守衛(wèi)的函數(shù)。它允許你在路由導(dǎo)航觸發(fā)之前執(zhí)行一些邏輯
代碼
const router = useRouter();
router.beforeEach((to, from) => {
// 監(jiān)聽(tīng)路由變化之前的操作 注意：這里是全局的 不建議用全局的
// to.matched.some(record => record.meta.requiresAuth)
if(to.name === "當(dāng)前路由"){
const { type} = to.params || {};
to.meta.title = “你想要修改的值”;
to.meta = {};
}
})注意：beforeEach 函數(shù)是全局函數(shù)，每次跳轉(zhuǎn)都會(huì)觸發(fā)，所以請(qǐng)寫(xiě)好當(dāng)前頁(yè)面的判斷，否則濫用全局函數(shù)可能導(dǎo)致后期不好維護(hù)
2.單個(gè)組件里面的鉤子函數(shù)
- beforeRouteUpdate（路由進(jìn)入當(dāng)前組件/頁(yè)面之前或者更新前）
- beforeRouteLeave（路由離開(kāi)當(dāng)前組件/頁(yè)面后）
- beforeRouteEnter（組件進(jìn)入組件/頁(yè)面前）
code:
<script lang="ts">
import { defineComponent } from "vue";
export default defineComponent({
beforeRouteEnter(to, from, next) {
// console.log('beforeRouteEnter=====');
//進(jìn)入當(dāng)前頁(yè)面時(shí)的操作
console.log('beforeRouteEnter beforeRouteEnter 進(jìn)入')
next();
},
beforeRouteLeave(to,from,next){
console.log('beforeRouteLeaveleave leave 離開(kāi)')
next();
}
});
</script>
注意：這幾個(gè)路由守衛(wèi)鉤子函數(shù)不能寫(xiě)在setup 的腳本里面
到此這篇關(guān)于vue3 修改路由中的meta屬性的文章就介紹到這了,更多相關(guān)vue3 修改meta屬性?xún)?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue+axios實(shí)現(xiàn)文件上傳的實(shí)時(shí)進(jìn)度條
最近用vue寫(xiě)上傳的時(shí)候,遇到一個(gè)需求就是頁(yè)面上展示上傳的進(jìn)度條,之后寫(xiě)過(guò)一次,但是用的是假交互,直接從0-100,今天分享一下用axios自帶的onUploadProgress來(lái)完成這個(gè)小需求,感興趣的朋友可以參考下2024-01-01
本文主要介紹了以element-ui基礎(chǔ)封裝大文件上傳的組件,包括斷點(diǎn)續(xù)傳,秒傳,上傳進(jìn)度條,封裝思想邏輯來(lái)源于el-upload 組件源碼,文中有具體案例分享,需要的朋友可以參考下2024-01-01
vue 1.0 結(jié)合animate.css定義動(dòng)畫(huà)效果
本文分步驟給大家介紹了Vue 1.0自定義動(dòng)畫(huà)效果，vue1.0代碼結(jié)合animate.css定義動(dòng)畫(huà)，頁(yè)面一定要引入animate.cdd，具體實(shí)例代碼大家參考下本文2018-07-07
vue中eventbus被多次觸發(fā)以及踩過(guò)的坑
這篇文章主要介紹了vue中eventbus被多次觸發(fā)以及踩過(guò)的坑，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-12-12
本文主要講解了如何在vue中使用pdfjs預(yù)覽pdf文件，這樣的優(yōu)勢(shì)是無(wú)須讓用戶(hù)安裝專(zhuān)門(mén)的軟件即可實(shí)現(xiàn)預(yù)覽，下面就看看如何實(shí)現(xiàn)這個(gè)需求2021-06-06
在本篇文章里小編給大家整理的是關(guān)于vue-socket.io跨域問(wèn)題有效解決方法，對(duì)此有興趣的朋友們可以參考下。2020-02-02
這篇文章主要介紹了在vue里如何使用pug模板引擎,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
vue3動(dòng)態(tài)路由+菜單欄的實(shí)現(xiàn)示例
在后臺(tái)管理系統(tǒng)，可以根據(jù)登錄用戶(hù)的不同返回不同路由，頁(yè)面也會(huì)根據(jù)這些路由生成對(duì)應(yīng)的菜單，本文主要介紹了vue3動(dòng)態(tài)路由+菜單欄的實(shí)現(xiàn)示例，感興趣的可以了解一下2024-04-04
這篇文章主要介紹了vue中的搜索關(guān)鍵字實(shí)例講解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue添加錨點(diǎn),實(shí)現(xiàn)滾動(dòng)頁(yè)面時(shí)錨點(diǎn)添加相應(yīng)的class操作
這篇文章主要介紹了vue添加錨點(diǎn),實(shí)現(xiàn)滾動(dòng)頁(yè)面時(shí)錨點(diǎn)添加相應(yīng)的class操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08