Question

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

现在，看起来路由器视图可以包含在keep-alive中，这可以解决一个问题，但会引入很多其他问题，因为我只希望该路由保持活动，而不是全部（并且目前我和＃39） ;我只使用一个顶级路由器视图）。 Vue 2.1通过引入router-view的include和exclude参数，显然已经做了一些事情来解决这个问题。但我也不是真的想要这样做，因为在我的主页面中预先声明应该或不应该使用keep-alive的所有路线似乎非常笨拙。在我配置路由的那一点（即在路由数组中）声明我是否想要保持活动会更加简洁。那么，我最好的选择是什么？

Answer 1

您可以指定要保留的路线，例如：

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

在这种情况下，只有本地路由会保持活动状态

Answer 2

在我看来，你正在寻找某种state management。如果您有多个组件共享的数据，并且您希望以不同的顺序呈现组件，但又不想为每个组件再次加载数据。

这类似如下：

Vue提供simple state management，但我建议使用Vuex这是vue社区中的州管理标准。

Answer 3

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

我发现这个库https://www.npmjs.com/package/vue-save-state为我解决了这个问题，保持了1个组件的状态与localStorage同步，并且只花了几分钟和几行代码（所有这些都记录在Github页面中包裹）。

Answer 4

一个没有localStorage的解决方案：

import {Component, Provide, Vue} from "vue-property-decorator";

@Component
export default class Counter extends Vue {
  @Provide() count = 0

  /**
   * HERE
   */
  beforeDestroy() {
    Object.getPrototypeOf(this).constructor.STATE = this;
  }

  /**
   * AND HERE
   */
  beforeMount() {
    const state = Object.getPrototypeOf(this).constructor.STATE;
    Object.entries(state || {})
        .filter(([k, v]) => /^[^$_]+$/.test(k) && typeof v !== "function")
        .forEach(([k]) => this[k] = state[k]);
  }
}

Answer 5

<router-view v-slot="{ Component }">
  <keep-alive>
    <component :is="Component" />
  </keep-alive>
</router-view>

完全一样，您不需要 App.vue 中的 Component 属性。即使您的组件没有指定 name 属性，您的 this 也会起作用。

使用vue-router保留组件状态？

5 个答案: