vue实现路由跳转动态title标题信息
manongba · 140浏览 · 发布于2022-06-24 +关注

这篇文章主要介绍了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>

相关推荐

RN开发环境的npm私库本地debug调试

manongba · 573浏览 · 2019-05-09 17:03:46
你不知道的浏览器渲染原理

追忆似水年华 · 1102浏览 · 2019-05-09 22:47:56
基于iview的router常用控制方式

追忆似水年华 · 762浏览 · 2019-06-03 10:39:21
编程小知识之 JavaScript 文件读取

manongba · 608浏览 · 2019-06-10 09:16:16
10个省时间的 PyCharm 技巧 赶快收藏!

· 565浏览 · 2019-06-10 09:32:01
加载中

0评论

评论
分类专栏
小鸟云服务器
扫码进入手机网页