vue-wechat-title动态修改title（含详情页标题修改办法）

1、安装vue-wechat-title插件

npm i vue-wechat-title --save

2、在main.js中使用

import VueWechatTitle from 'vue-wechat-title'
Vue.use(VueWechatTitle)

3、在App.vue文件中使用

<router-view v-wechat-title="$route.meta.title"/>

4.1、在每个router的index.js设置title名

export default{
  path : '/home',
  component : () => import('@/views/home'),
  meta: {
    title: "(≧▽≦)/欢迎来到Sunfire的博客"
  }
}

4.2、详情页标题修改办法：

详情页需要先从后台获取数据才能知道要修改的title，所以我们前面写死的title配置方法是行不通的

进入详情页组件

export default {
    name : 'Detail',
    created () {
        document.title = ''    #创建title
    },
    mounted:function(){
        var id = this.$route.params.id
        axios({
            method:'get',
            url: '/apiAdress' + id    #axios通过传递的id获取详情页数据
        })
        .then(res => {
            this.artDatas=res.data;
            document.title= this.artDatas.Title    #根据详情页标题修改title
        });
    }
}

5、监听路由变化改变title（全局守卫）

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