vue动态修改页面标题

安装依赖

npm i  vue-wechat-title --save

main.js

import VueWechatTitle from '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>

我是用documen.title实现的

constantRoutes.beforeEach((to, from, next) => {
  if(to.meta.title) {
    document.title = to.meta.title
  }
  next()
})

有页面复用的部分就用了指令

<div class="class" v-wechat-title="$route.meta.title = title()"></div>
methods:{
  title(){
      switch(Number(this.courseStatus)) {
        case 0:
          return '待约课';
        case 1:
          return '待上课';
        case 2:
          return '已上课';
      }
   },
 }