在Vue中如何分别缓存页面状态

不要在router/index.js 里将多个路由指向同一个组件,而应该新建多个页面组件,每个组件中只是作为 HelloWorld 组件的容器,然后多个路由页面分别指向不同的页面组件,然后在 keep-alive 的 include 属性中加入所有路由组件的 name,就可以实现分别缓存同一组件不同实例的状态了。

新建 newHelloWorld.vue

新建 editHelloWorld.vue

router/index.js

App.vue 关键代码

这样就可以啦,两个HelloWorld 组件就可以分别缓存状态啦,其实只是一开始想错了,换个思路就可以了 。

需要注意的是,不要把路由直接指向同一个组件,而是用两个路由页面组件作为容器,包裹相同的组件。

本文是转载文章,点击查看原文
如有侵权,请联系 lx@jishuguiji.net 删除。