用mpvue 开发的微信小程序,文章详情页,因为下面有相关推荐文章,可点击在进入文章详情页,两次都是跳转的同一个路径,只不过参数的ID不同去获取不同的数据,
问题是: 微信小程序左上角的返回不会自动刷新, 导致从ID=1 跳转 id=2的页面, 返回后还是ID=2 的数据;
求大佬
用mpvue 开发的微信小程序,文章详情页,因为下面有相关推荐文章,可点击在进入文章详情页,两次都是跳转的同一个路径,只不过参数的ID不同去获取不同的数据,
问题是: 微信小程序左上角的返回不会自动刷新, 导致从ID=1 跳转 id=2的页面, 返回后还是ID=2 的数据;
求大佬
可以使用minxi插件的方式实现。
在入口中引用:
import MyPlugin from './minxins'
Vue.use(MyPlugin)
新建文件夹> index.js
内容如下:
const pageDatas = {}
let MyPlugin = {};
MyPlugin.install = function(Vue) {
// 添加全局方法或属性
Vue.prototype.$isPage = function isPage() {
return this.$mp && this.$mp.mpType === 'page'
}
Vue.prototype.$pageId = function pageId() {
return this.$isPage() ? this.$mp.page.__wxWebviewId__ : null
}
// 注入组件
Vue.mixin({
methods: {
stashPageData() {
// 备份route和当前数据
return {
data: {
...this.$data
}
}
},
restorePageData(oldData) {
Object.assign(this.$data, oldData.data)
}
},
onLoad() {
if (this.$isPage()) {
// 新进入页面 初始化数据
Object.assign(this.$data, this.$options.data())
}
},
onUnload() {
if (this.$isPage()) {
// 退出页面,删除数据
delete pageDatas[this.$pageId()]
this.$needReloadPageData = true
console.log(pageDatas);
}
},
onHide() {
if (this.$isPage()) {
// 将要隐藏时,备份数据
pageDatas[this.$pageId()] = this.stashPageData()
console.log(pageDatas);
}
},
onShow() {
if (this.$isPage()) {
// 如果是后退回来的,拿出历史数据来设置data
if (this.$needReloadPageData) {
const oldData = pageDatas[this.$pageId()]
if (oldData) {
this.restorePageData(oldData)
}
this.$needReloadPageData = false
}
}
}
})
}
export default MyPlugin
10 回答11.2k 阅读
5 回答4.9k 阅读✓ 已解决
4 回答3.1k 阅读✓ 已解决
2 回答2.8k 阅读✓ 已解决
3 回答1.5k 阅读✓ 已解决
3 回答2.4k 阅读✓ 已解决
3 回答2.2k 阅读✓ 已解决
从id=1 跳转 id=2的页面, 返回可以触发 id=1 页面的
onShow
事件