问题一:
列表页->详情页,列表页里含一些筛选框和一表格,详情页里含各种组合表单控件。
为了满足用户体验,列表页组件List与详情页组件Detail都采用了进行缓存,这样做的好处是,切换页面时依然会保留用户的数据。这条是非常有必要的,比如你填了一大串表单,切走页面,回来的时候发现啥也没了,崩溃有木有!ORZ…
(会根据组件的 name 选项进行匹配,所以组件如果想要条件性地被 KeepAlive 缓存,就必须为组件显式声明一个 name)
缓存是通过组件name来找的。但我们的系统里有多个列表菜单,对应的详情页Detail内容是一致的,所以会共用Detail组件,组件name命名要求唯一。此时想了个解决方案:动态的为组件生成name。经过一番查找,网上也有同样问题的网友 https://segmentfault.com/q/1010000040423777 感谢提供了思路~
解决方案:
评估了自身系统的特点,套空壳的办法最为简便好用,新建一层vue组件,引入共用的Detail组件,再声明唯一的name值。
问题二:
继续刚才的背景接着说,多个列表页可以缓存了。新的问题又来了,列表页中入口a进入详情页,再点击入口b进入详情页,详情页的内容依然是a详情页里的内容(因为做了缓存)。既需要它,又不让它什么时候都有,让缓存在该来的时候来就可以了
解决方案:
<keep-alive>
<component :is="Component" :key="route.fullPath" />
</keep-alive>
这上面的key值是关键,用 key 来让组件重新渲染。如果 key保持不变,则不会更改组件。 但是,如果key发生更改, Vue 知道它应该删除旧组件并创建一个新组件
当key值的fullPath,也就是带参数的路由地址发生变化,就会重新渲染
以上是对自己项目中遇到问题的一个粗略总结和回顾,如果还能帮助到正在面对问题的你,那就再好不过的啦~~