快捷導(dǎo)航

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

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

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

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

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

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

列表頁點(diǎn)擊攜帶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)可能會(huì)有meta的title會(huì)出現(xiàn)空值的狀態(tài)，需要點(diǎn)擊兩次才出現(xiàn)頁面的動(dòng)態(tài)title，如果點(diǎn)擊第二次會(huì)出現(xiàn)上一次的title，因?yàn)榈诙蔚狞c(diǎn)擊沒有經(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里面需要實(shí)現(xiàn)路由的判斷，因?yàn)轫撁娴膖itle值最終的是顯示的是meta里面的title，而不是query攜帶過來的name，有點(diǎn)繞，一開始是直接賦值，但是會(huì)出現(xiàn)空值現(xiàn)象，也感謝朋友的幫助與提醒?。?！

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

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

需求

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

解決辦法

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

一級(jí)頁面：index.vue

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

二級(jí)頁面：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')
  },

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

您可能感興趣的文章: