vue路由跳转动态title标题信息-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39224105/article/details/123394218

本文介绍了两种在Vue中实现浏览器标题随着路由变化的方法。第一种是通过在router/index.js配置路由元信息meta，并在beforeEach钩子中设置document.title。第二种方法是使用v-title指令，结合data属性动态更新页面标题。示例代码详细展示了这两种实现方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

想要让浏览器的标题，随着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();
  },