小程序详情页跳转详情页返回出现的bug

用mpvue 开发的微信小程序,文章详情页,因为下面有相关推荐文章,可点击在进入文章详情页,两次都是跳转的同一个路径,只不过参数的ID不同去获取不同的数据,
问题是: 微信小程序左上角的返回不会自动刷新, 导致从ID=1 跳转 id=2的页面, 返回后还是ID=2 的数据;

求大佬

阅读 2.7k
2 个回答

从id=1 跳转 id=2的页面, 返回可以触发 id=1 页面的 onShow 事件

onLoad: function() {
    
},
onShow: function() {
    this.onLoad()
}
新手上路,请多包涵

可以使用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
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题