vue如何動態(tài)修改meta的title

更新時間：2022年06月22日 14:39:12 作者：Front?小思

這篇文章主要介紹了vue如何動態(tài)修改meta的title，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

如何動態(tài)修改meta的title

需求：不去掉原生導(dǎo)航欄的情況下實現(xiàn)詳情頁的動態(tài)title（列表頁query攜帶參數(shù)name到詳情頁實現(xiàn)動態(tài)title）

@on-item-click="$router.push({path: '/yunCrm', query: {id:item.id,name:item.name}})"

列表頁點擊攜帶name到詳情頁職位詳情頁的title,并且賦值給router里面的meta的title，然后綁定到原生的document.title上！

created(){
         this.category_id = this.$route.query.id;//列表的詳情id
         this.$route.meta.title = this.$route.query.name;//列表的名稱
         document.title = this.$route.meta.title;
    }

注意：一開始的邏輯是直接拿到name賦值到原生document.title上！但是這樣路由跳轉(zhuǎn)可能會有meta的title會出現(xiàn)空值的狀態(tài)，需要點擊兩次才出現(xiàn)頁面的動態(tài)title，如果點擊第二次會出現(xiàn)上一次的title，因為第二次的點擊沒有經(jīng)過router.js！

router.afterEach((to, from, next) => {
  if (to.path === '/yunCrm' && to.query.name) {
  to.meta.title = to.query.name;
  document.title = to.meta.title;
  }
});

router.js里面需要實現(xiàn)路由的判斷，因為頁面的title值最終的是顯示的是meta里面的title，而不是query攜帶過來的name，有點繞，一開始是直接賦值，但是會出現(xiàn)空值現(xiàn)象，也感謝朋友的幫助與提醒?。?！

注：首先得使用to.query.name來接收列表頁傳來的真實值再賦值給最終顯示的to.meta.title！！

動態(tài)修改路由的meta.title

需求

從一級頁面跳轉(zhuǎn)到多個二級頁面，發(fā)現(xiàn)二級頁面大體相同，只有面包屑的title不一樣

解決辦法

在二級頁面使用beforeRouteEnter查看從那個按鈕跳轉(zhuǎn)過來

一級頁面：index.vue

// 批量啟用\批量停用操作
    toPage(item) {
      this.$router.push({path: '/equipment/distribute/batch',query: {type: item}})
    },

二級頁面：batch.vue

beforeRouteEnter:(to,from,next) => {
    if(to.query.type == 'start') {
      to.meta.title = '批量啟用'
    }else if(to.query.type == 'stop') {
      to.meta.title = '批量停用'
    }
    next()
    console.log(to,'tttt')
  },

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章: