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)寫好當(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ù)不能寫在setup 的腳本里面
到此這篇關(guān)于vue3 修改路由中的meta屬性的文章就介紹到這了,更多相關(guān)vue3 修改meta屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要介紹了vue+webpack中配置ESLint，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-11-11
vue監(jiān)聽(tīng)scroll的坑的解決方法
這篇文章主要介紹了vue監(jiān)聽(tīng)scroll的坑的解決方法，現(xiàn)在分享給大家，也給大家做個(gè)參考，希望給有同樣經(jīng)歷的人幫助2017-09-09
最近在學(xué)習(xí)vue，今天正好發(fā)現(xiàn)個(gè)問(wèn)題，本文介紹了v-html渲染組件問(wèn)題，整理了問(wèn)題的解決方法，有需要的小伙伴可以參考下2021-05-05
vue輪播組件實(shí)現(xiàn)$children和$parent 附帶好用的gif錄制工具
這篇文章主要介紹了vue輪播組件實(shí)現(xiàn)，$children和$parent，附帶好用的gif錄制工具,需要的朋友可以參考下2019-09-09
vue中實(shí)現(xiàn)圖片壓縮 file文件的方法
這篇文章主要介紹了vue中實(shí)現(xiàn)圖片壓縮 file文件的方法，本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-05-05
Vue框架可以很方便的引入各種插件,但是也因此會(huì)經(jīng)常遇到種編譯報(bào)錯(cuò),這篇文章主要給大家介紹了關(guān)于vue前端編譯報(bào)錯(cuò)解決的相關(guān)資料,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
解決vue3中from表單嵌套el-table時(shí)填充el-input,v-model不唯一問(wèn)題
這篇文章主要給大家介紹一下如何解決vue3中from表單嵌套el-table時(shí)填充el-input,v-model不唯一問(wèn)題，文中有相關(guān)的解決方法，通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2023-07-07
使用Elemen加上lang=“ts“后編譯報(bào)錯(cuò)
本文主要介紹了使用Elemen加上lang=“ts“后編譯報(bào)錯(cuò)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-04-04
Vue中使用Canvas實(shí)現(xiàn)繪制二維碼
這篇文章主要為大家詳細(xì)介紹了如何在Vue中使用Canvas實(shí)現(xiàn)繪制二維碼，文中的示例代碼講解詳細(xì)，感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2007-02-02
vue調(diào)取電腦攝像頭實(shí)現(xiàn)拍照功能
這篇文章主要為大家詳細(xì)介紹了vue調(diào)取電腦攝像頭實(shí)現(xiàn)拍照功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09