亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

vue3?修改路由中的meta屬性

 更新時(shí)間：2024年11月27日 11:44:45   作者：wangshang1320  
本文主要介紹了Vue3中使用鉤子函數(shù)來修改路由中的meta屬性值的方法,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

有些時(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)聽路由變化之前的操作  注意：這里是全局的 不建議用全局的
  // 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)前頁面的判斷，否則濫用全局函數(shù)可能導(dǎo)致后期不好維護(hù)

2.單個(gè)組件里面的鉤子函數(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)前頁面時(shí)的操作
    console.log('beforeRouteEnter beforeRouteEnter 進(jìn)入')
    next();
  },
  beforeRouteLeave(to,from,next){
    console.log('beforeRouteLeaveleave leave 離開')
    next();
  }
});
</script>

注意：這幾個(gè)路由守衛(wèi)鉤子函數(shù)不能寫在setup 的腳本里面 

到此這篇關(guān)于vue3 修改路由中的meta屬性的文章就介紹到這了,更多相關(guān)vue3 修改meta屬性內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

相關(guān)文章

最新評(píng)論