vue单页面动态设置title

最新推荐文章于 2025-03-18 02:10:29 发布

bigfatDone

最新推荐文章于 2025-03-18 02:10:29 发布

阅读量649

点赞数

分类专栏： vue

本文链接：https://blog.youkuaiyun.com/bigfatDone/article/details/105067679

版权

vue 专栏收录该内容

17 篇文章

订阅专栏

下面介绍三种动态设置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>