Nuxt 子路由重新渲染整个页面答案

【问题标题】：Nuxt child routes re-render whole pageNuxt 子路由重新渲染整个页面
【发布时间】：2021-06-24 20:55:26
【问题描述】：

我正在尝试使用子路由来保持页面上的某些数据处于活动状态，同时更改某些内容。

我在https://codesandbox.io/s/bold-shape-22bom 设置了一个简单的示例

点击“猫”，然后将计数器增加几次。然后点击狗，计数器被重置。但我需要计数器来保留它的计数。

我只是从根本上误解了<nuxt-child> 应该做什么？

【问题讨论】：

您使用asyncData 并在每次更改任何路由时将计数器值设置为0，这就是不保留计数器值的原因。如果状态在组件状态的 inside 中，您可以使用 keep-alive，如下所示：vuejs.org/v2/guide/… 您确实在此范围内拥有它。
@kissu 使用asyncData 实际上并不是问题的原因。这是因为计数器存在于页面本身中，并且每个页面（/cat 和/dog）都是具有自己计数器的唯一实例。

标签： javascript vue.js nuxt.js

【解决方案1】：

每个页面（/cat 和/dog）都有自己的计数器实例，因此它们彼此独立。要保持计数器处于活动状态，您可以将其移动到布局中。

例如，您可以将计数器移动到它自己的组件中（例如ButtonCounter.vue）并在布局中使用它：

// components/ButtonCounter.vue
<template>
  <div>
    <div>
      <button @click="counter++">increase</button>
      <p>button clicked {{ counter }} times</p>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      counter: 0,
    };
  },
};
</script>

// layout/default.vue
<template>
  <div class="container">
    <ul style="padding: 20px; border: 1px solid black">
      <li><nuxt-link to="/cat">cat</nuxt-link></li>
      <li><nuxt-link to="/dog">dog</nuxt-link></li>
    </ul>
    <div>
      <ButtonCounter />
      <Nuxt />
    </div>
  </div>
</template>

demo

【讨论】：

是的。在我的真实项目中，我可以访问商店，并且数据不是计数器，而是一个巨大的 JSON 对象，所以也许我会在那里尝试一下。你知道使用keep-alive 对性能的影响吗？它实际上是一个相当大的应用程序，我真的不需要任何其他组件来维持生命。
@solidau 不要在上面使用keep-alive。无论如何，您的问题与它无关。
这完全取决于您希望如何保持它的持久性：localStorage，使用v-show、vuex 或keep-alive（即使我不确定它在动态路由中的表现如何）。很多可能性，但这也取决于您的应用程序。
@kissu 是的，我开始意识到......我想我需要想出一个更完整的例子来更好地说明我正在尝试做的事情。
@tony19 我继续并将其标记为答案，因为它解决了我在问题中陈述的问题，但稍后我可能会尝试提出更完整的示例。如果是这样，我会在此处链接 - 感谢您的努力！