不要在router/index.js 里将多个路由指向同一个组件,而应该新建多个页面组件,每个组件中只是作为 HelloWorld 组件的容器,然后多个路由页面分别指向不同的页面组件,然后在 keep-alive 的 include 属性中加入所有路由组件的 name,就可以实现分别缓存同一组件不同实例的状态了。
新建 newHelloWorld.vue
新建 editHelloWorld.vue
router/index.js
App.vue 关键代码
这样就可以啦,两个HelloWorld 组件就可以分别缓存状态啦,其实只是一开始想错了,换个思路就可以了 。
需要注意的是,不要把路由直接指向同一个组件,而是用两个路由页面组件作为容器,包裹相同的组件。