时间戳

首页 > 解决方案 > Nuxt 子路由重新渲染整个页面

javascript - Nuxt 子路由重新渲染整个页面

问题描述

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

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

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

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

标签： javascriptvue.jsnuxt.js

解决方案

每个页面 (/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>

演示

推荐阅读