APP中：vue-h5项目监听从别的项目页面返回进行刷新.pdf
版权申诉
62 浏览量
2021-12-16
21:32:22
上传
评论
收藏 49KB PDF 举报
很多项目是内嵌在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
}
};
});
很多项目是内嵌在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
资源评论
