vue實現(xiàn)路由跳轉動態(tài)title標題信息

更新時間：2022年06月24日 08:37:42 作者：十貳_

這篇文章主要介紹了vue實現(xiàn)路由跳轉動態(tài)title標題信息，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

路由跳轉動態(tài)title標題信息

想要讓瀏覽器的標題，隨著vue的路由跳轉的改變而改變，就要配置router/index.js文件里的信息。在meta對象里面配置一個title。

{
? ? path: "/",
? ? name: "Home",
? ? meta: {
? ? ? title: "首頁"http://這是重點
? ? },
? ? 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="暫無數(shù)據(jù)" 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動態(tài)改變title

需求

1.不同路由路徑下，動態(tài)更改title

2.相同路徑下，像產(chǎn)品詳情頁，需要根據(jù)產(chǎn)品名字不同動態(tài)更改title

解決需求一

1.在router.js根據(jù)不同的路由配置所屬title

{
? ? path: '/startCertificate',
? ? name: 'startCertificate',
? ? component: startCertificate,
? ? meta:{
? ? ? title:'這是動態(tài)路由哦'
? ? }
?},

2.在main.js中配置

情況一：普通h5開發(fā)

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

情況二：在app內(nèi)嵌h5的混合應用中，iOS系統(tǒng)下部分APP的webview中的標題不能通過 document.title = xxx 的方式修改，因為在IOS webview中網(wǎng)頁標題只加載一次，動態(tài)改變是無效的，解決代碼如下

router.afterEach(route => {
? // 從路由的元信息中獲取 title 屬性
? if (route.meta.title) {
? ? document.title = route.meta.title;
? ? // 如果是 iOS 設備，則使用如下 hack 的寫法實現(xiàn)頁面標題的更新
? ? 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 = '動態(tài)title'
? ? },
}
</script>

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

您可能感興趣的文章: