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

{
    path: "/",
    name: "Home",
    meta: {
      title: "首页"//这是重点
    },
    component: () => import(  "../views/home/index.vue"),
  }

router.beforeEach((to, from, next) => {
  
  if (to.meta.title) { //如果设置标题，拦截后设置标题
    document.title = to.meta.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();
  },

{
    path: '/startCertificate',
    name: 'startCertificate',
    component: startCertificate,
    meta:{
      title:'这是动态路由哦'
    }
 },

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

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)
    }
  }
});

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

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

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