vue单页面动态设置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>