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