vue单页面动态设置title

最新推荐文章于 2025-06-18 16:19:36 发布

原创最新推荐文章于 2025-06-18 16:19:36 发布 · 697 阅读

1 ·

CC 4.0 BY-SA版权

vue 专栏收录该内容

17 篇文章

订阅专栏

本文介绍三种在Vue项目中动态设置页面标题的方法：直接使用document.title，利用router.js进行设置，以及采用vue-wechat-title插件实现跨平台兼容性。每种方法均有详细步骤与代码示例。

下面介绍三种动态设置vue项目中的title方式

方法一

通过document.title来设置

// 业务代码
beforeCreate () {
  document.title = this.$route.query.title // 获取url中title属性
}

方法二

在 router.js文件中设置

router.afterEach((to, from) => {
    to.meta.title = to.query.title // 获取url中title属性
  }）

方法三

通过vue-wechat-title插件来设置，Vuejs 单页应用在iOS系统下部分APP的webview中标题不能通过 document.title = xxx 的方式修改该插件只为解决该问题而生(兼容安卓)

npm install vue-wechat-title

// main.js
Vue.use(require('vue-wechat-title'))

<!-- 任意元素中加 v-wechat-title 指令 建议将标题放在 route 对应meta对象的定义中 -->
<div v-wechat-title="$route.meta.title"></div>
<!--or-->
<router-view v-wechat-title="$route.meta.title"></router-view>