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