APP中:vue-h5项目监听从别的项目页面返回进行刷新

很多项目是内嵌在app中的。如在一个卡券列表页面,点击了领券跳转。跳转到领券页面领取了卡券,点击返回到卡券列表的时候需要刷新页面。重新获取数据。
1.将监听放在主页面

window.postEvent = (res) => {
        const pathName = this.$route.name
        let routesArr = ['home', 'xx', 'xx', 'xx']
        if (res.eventType === 'appear' && routesArr.includes(pathName)) {
          if (pathName === 'home') {
           //刷新操作
          } else {
           //xxx
          }
        }
 };

2.除了项目的home页应该出现刷新,其他页面跳转后再返回到该页面也需要进行刷新。但是postEvent 事件是只能被定义一次,但可以在别的页面调用home页面的该事件(小项目中调用兄弟组件的事件可以用bus-vue中的中央事件总线)。
1.在main.js中new一个vue对象

var bus = new Vue()
export default bus

2.在组件中引入bus的引用

import bus from '../../main'

3.通过emit触发事件传值(需要调用方法的页面中)

//比如car页面
bus.$emit('rushPage','');

4.home页面用on监听事件

bus.$on('rushPage',function (msg) {
 // 监听路由
 window.postEvent = (res) => {
        const pathName = this.$route.name
        let routesArr = ['home', 'car', 'xx', 'xx']
        if (res.eventType === 'appear' && routesArr.includes(pathName)) {
          if (pathName === 'home') {
           //刷新操作
          } else {
           //xxx
          }
        }
        if (pathName === 'car') {
           //刷新操作
          } else {
           //xxx
          }
 };
});

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值