该问题出现的 issue, 目前官方未给出修复以及解决方案
issue 114
使用场景:
在使用 mpvue 开发小程序中, 出现同路由复用, 使用不同页面的情况. 例如: 全部 -> 详情页 1(id=22)-> 个人页 -> 详情页 2(id=24, 前面详情页 1 id 被改变)-> 返回个人页 -> 返回详情页 (id=24)
问题分析:
通过打断点分析, 同路由下的不同页面, 数据 data 的挂载, 是共享的... 也就是说用的一直都是同一个 data, 而不是每个页面拥有一个独立的 data
解决方案:
使用修改后的 mpvue-loader 插件包 https://github.com/jgchenu/mpvue-loader
使用开源更改后的页面插件包 https://github.com/HelloZJW/mpvue-page-factory
需要修改 重复使用路由 页面的 main.JS 文件
- import pageFactory from 'mpvue-page-factory'
- import App from './index'
- Page(pageFactory(App))
修改使用的 mvpue-loader 插件以及增加工厂页面插件
- --package.JSON
- "mpvue-loader": "git+https://github.com/HelloZJW/mpvue-loader.git#patch1.0.x",
- "mpvue-page-factory": "^1.0.0",
注意:
并且在该页面请勿使用 mpvue 官方文档提供的 API 获取页面传参:
请使用小程序的 API 获取页面栈, 在跳转的页面 onLoad 函数 附带参数 option, 然后再通过 option 来获取 id
感谢该方案的插件提供者~ HelloZJW
来源: https://juejin.im/post/5bc1862bf265da0ad82c344d