vue项目微信公众号title设置和调用接口动态修改

需求场景：

微信后台配置不同的商户id，请求接口获取商户信息（名称、头像等）

1、安装插件

# yarn add vue-wechat-title

# npm i vue-wechat-title

2、main.js文件

Vue.use(require('vue-wechat-title'))

3、App.vue文件

<template>
    <div id="app">
        <div v-wechat-title="$route.meta.title"></div>
        <keep-alive>
            <router-view v-if="$route.meta.keepAlive"></router-view>
        </keep-alive>
        <router-view v-if="!$route.meta.keepAlive"></router-view>
    </div>
</template>

4、router.js文件

{
    path: '/coupon',
    component: coupon,
    meta: { title: '惠联生花', keepAlive: true, wechat_auth: true, alipay_auth: true }
},
{
    path: '/coupon_product_detail',
    component: coupon_product_detail,
    meta: { title: '优惠券详情', wechat_auth: true, alipay_auth: true }
}

5、根据接口返回动态修改title

view层：

<!-- 给想要修改title的页面添加  v-wechat-title -->
<div id="coupon_list" @scroll="scrollToTop" v-wechat-title="titleName"></div>

methods（数据处理）：

// 获取商户id等参数
created(){
    if (this.$route.query.type){
        this.type = this.$route.query.type;
        this.targetId = this.$route.query.targetId;
    }
    this.getTitle()
},

//请求接口返回商户名称
getTitle(){
    getTitle(this.type,this.targetId).then( res => {
        this.titleName = res.data.name?res.data.name:"爆品福利";
    })
}

 接口返回：

抛出问题：（返回后之前的title被替换）

爆品福利列表页（惠联生花） =>  进详情（优惠券详情） => 返回列表页（优惠券详情）

 注: 
1. 首先进入爆品福利列表页，title显示惠联生花
2. 进入详情页，title显示优惠券详情
3. 返回爆品福利列表页，title依然显示优惠券详情

beforeRouteLeave(to, from, next){
    this.titleName = document.title;
    next()
},
beforeRouteEnter(to, from, next){
    next(vm => {
        document.title = vm.titleName;
    })
}

beforeRouteEnter(to, from, next)：进入路由之前执行的函数,写在组件里可根据路由进行页面判断或传值。

beforeRouteLeave(to, from, next)：离开路由之前执行的函数,可用于页面的反向传值，页面跳转。

---

console.log(to)