vue實現路由跳轉動態title標題資訊

2022-06-24 10:01:49

路由跳轉動態title標題資訊

想要讓瀏覽器的標題，隨著vue的路由跳轉的改變而改變，就要設定router/index.js檔案裡的資訊。在meta物件裡面設定一個title。

{
    path: "/",
    name: "Home",
    meta: {
      title: "首頁"//這是重點
    },
    component: () => import( /* webpackChunkName: "about" */ "../views/home/index.vue"),
  }

然後在路由跳轉之前判斷跳轉之後的頁面是否設定的有title值。如果有則替換title，如果沒有則保持title不變即可。

router.beforeEach((to, from, next) => {
  
  if (to.meta.title) { //如果設定標題，攔截後設定標題
    document.title = to.meta.title
  }
  })

設定成功之後，vue在進行路由跳轉的時候，頁面的title也會跟著路由設定的資訊進行跳轉。

--------2022-06-14補充--------

第二種方式：使用v-title

 <div class="wrapper" v-title :data-title="webTitle">
    <!-- <div class="wrapper-main-Img">
      <img
        src="../../../assets/images/mobile/hdkb.png"
        alt=""
        class="wrapper-main1-wqjm"
      />
    </div> -->
    <p class="hy-title">{{ columnName || "--" }}</p>
    <div class="warpper-news-list">
      <van-empty description="暫無資料" v-if="actLen == 0" />
      <div class="actLenWrap" v-if="actLen == 1">
        <div
          class="warpper-news-item"
          v-for="(i, v) in activetyList"
          :key="v"
          @click="toActDetails(i.id,i.title)"
        >
          <div class="warpper-news-l">
            <p class="warpper-news-title">{{ i.title }}</p>
            <p class="warpper-news-details">
              {{ i.description || '--' }}
            </p>
            <p class="warpper-news-time">{{ i.releaseTime.substring(0,10) || '--' }}</p>
          </div>
          <div class="warpper-news-r">
            <img
              src="../../../assets/images/mobile/indictor.png"
              alt=""
              class="wrapper-main1-indictor"
            />
          </div>
        </div>
      </div>
    </div>
    <van-pagination
      v-model="params.current"
      :page-count="Math.ceil(total / size)"
      mode="simple"
      @change="handleSize"
      v-if="actLen == 1"
      class="pageNation"
    />
  </div>

created() {
    this.columnName = this.$route.query.name;
    this.webTitle = this.columnName +'-test';
    this.params.columnId = this.$route.query.id;
    // this.getActList();
    this.contentPage();
  },

vue動態改變title

需求

1.不同路由路徑下，動態更改title

2.相同路徑下，像產品詳情頁，需要根據產品名字不同動態更改title

解決需求一

1.在router.js根據不同的路由設定所屬title

{
    path: '/startCertificate',
    name: 'startCertificate',
    component: startCertificate,
    meta:{
      title:'這是動態路由哦'
    }
 },

2.在main.js中設定

情況一：普通h5開發

router.beforeEach((to,from,next) =>{
    // 路由發生變化修改頁面title
   if (to.meta.title) {
     document.title = to.meta.title;
   }
}

情況二：在app內嵌h5的混合應用中，iOS系統下部分APP的webview中的標題不能通過 document.title = xxx 的方式修改，因為在IOS webview中網頁標題只載入一次，動態改變是無效的，解決程式碼如下

router.afterEach(route => {
  // 從路由的元資訊中獲取 title 屬性
  if (route.meta.title) {
    document.title = route.meta.title;
    // 如果是 iOS 裝置，則使用如下 hack 的寫法實現頁面標題的更新
    if (navigator.userAgent.match(/(i[^;]+;( U;)? CPU.+Mac OS X/)) {
      const hackIframe = document.createElement('iframe');
      hackIframe.style.display = 'none';
      hackIframe.src = '/static/html/fixIosTitle.html?r=' + Math.random();
      document.body.appendChild(hackIframe);
      setTimeout(_ => {
        document.body.removeChild(hackIframe)
      }, 300)
    }
  }
});

解決需求二

1.安裝依賴：npm i vue-wechat-title

2.在main.js中設定：

import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)

3.在需要改變title的vue檔案中：

<template>
    <div class="customerCaseDetail" v-wechat-title="changeTitle">
 
    </div>
</template>

<script>
export default {
    data() {
        return {
            changeTitle:''
        }
    },
    created() {
        this.changeTitle = '動態title'
    },
}
</script>

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。

vue實現路由跳轉動態title標題資訊

目錄

路由跳轉動態title標題資訊

vue動態改變title

需求

解決需求一

解決需求二

熱門文章