vue实现路由跳转动态title标题信息

Cady ·

更新时间:2024-09-20

· 807 次阅读

路由跳转动态title标题信息

vue动态改变title

需求

解决需求一

解决需求二

路由跳转动态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>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持软件开发网。

VUE 路由 title

1024 个赞