vue项目微信公众号动态修改title

·  阅读 289

这是我参与8月更文挑战的第6天,活动详情查看:8月更文挑战

博主相关个人技术博客、微信公众号、视频号、设计作品集

需求场景:

微信后台配置不同的商户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) 、from同样

  • 页面的所有信息 (path路径、meta、query参数)

分类:
前端
标签:
收藏成功!
已添加到「」, 点击更改