vue如何動態修改meta的title

如何動態修改meta的title

需求:不去掉原生導航欄的情況下實現詳情頁的動態title(列表頁query攜帶參數name到詳情頁實現動態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上!但是這樣路由跳轉可能會有meta的title會出現空值的狀態,需要點擊兩次才出現頁面的動態title,如果點擊第二次會出現上一次的title,因為第二次的點擊沒有經過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裡面需要實現路由的判斷,因為頁面的title值最終的是顯示的是meta裡面的title,而不是query攜帶過來的name,有點繞,一開始是直接賦值,但是會出現空值現象,也感謝朋友的幫助與提醒!!!

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

動態修改路由的meta.title

需求

從一級頁面跳轉到多個二級頁面,發現二級頁面大體相同,隻有面包屑的title不一樣

解決辦法

在二級頁面使用beforeRouteEnter查看從那個按鈕跳轉過來

一級頁面: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')
  },

以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。

推薦閱讀: