用vue-router保留组件状态?

vue.js Vue.js

达蒙猪猪

2020-03-12

我有一个清单/详细使用案例,用户可以双击产品列表中的一个项目,转到详细信息屏幕进行编辑,然后在完成后返回清单屏幕。我已经使用此处描述的动态组件技术完成了此操作:https : //vuejs.org/v2/guide/components.html#Dynamic-Components但是,既然我打算在应用程序的其他地方使用vue-router,我想将其重构为改为使用路由。通过动态组件技术,我使用了保持活动状态以确保当用户切换回列表视图时,与编辑之前存在相同的选择。但是在我看来,通过路由,产品列表组件将被重新呈现,这不是我想要的。

现在,看来路由器视图可以包裹在keep-alive中,这可以解决一个问题,但会引入很多其他问题,因为我只希望该路由保持活动状态,而不是所有路由都保持活动状态(目前,我只是在使用一个单个顶级路由器视图)。Vue 2.1通过为路由器视图引入include和exclude参数,显然已经为解决此问题做了一些事情。但是我也不想要这样做,因为不得不在我的主页中预先声明所有应该或不应该使用keep-alive的路由都是很笨拙的。在配置路由的那一点(即,在routes数组中)声明是否要保持活动状态会变得更加整洁。那我最好的选择是什么?

第1368篇《用vue-router保留组件状态?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

3个回答
猿Green 2020.03.13

您可以指定要保留的路线,例如:

<keep-alive include="home">
  <router-view/>
</keep-alive>

在这种情况下,只有本国路线才能保持活动状态

Eva梅 2020.03.13

我遇到了类似的问题,并查看了Vuex,但认为它需要对我的代码进行太多更改/添加才能添加到项目中。

我发现这个库https://www.npmjs.com/package/vue-save-state为我解决了这个问题,使1个组件的状态与localStorage保持同步,并且只花了几分钟和几行代码(全部记录在软件包的Github页中)。

理查德Itachi 2020.03.13

在我看来,您正在寻找某种状态管理如果您有多个组件共享的数据,并且想要以不同的顺序渲染组件,但是又不想为每个组件再次加载数据。

如下所示:

在此处输入图片说明

Vue提供了简单的状态管理,但是我建议使用Vuex,这是vue社区中状态管理的标准。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android