vue如何動態修改meta的title

Posted on by

如何動態修改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。

推薦閱讀：