The complete page gets re-rendered when Nuxt child routes are used

Question

The complete page gets re-rendered when Nuxt child routes are used

When I attempt to utilize child routes, my goal is to maintain specific data on the page while modifying other content.

To illustrate this concept, I have created a straightforward example available at this link.

After selecting "cat" and increasing the counter multiple times, you will notice that switching to "dog" results in the counter resetting. However, I am seeking a solution where the counter retains its count.

I am wondering if I am misinterpreting the intended functionality of <nuxt-child>. Any insights would be greatly appreciated!

javascript vue.js nuxt.js

Answer 1

Answer №1

Each section of your website, such as the cat page (/cat) and dog page (/dog), has its own unique counter that operates independently from one another. To ensure that the counter remains active, it is recommended to incorporate it into the layout structure.

One approach could be moving the counter functionality into a separate component, like ButtonCounter.vue, which can then be utilized within the layout:

// 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>

Check out the demo here!

Answer 2

Each section of your website, such as the cat page (/cat) and dog page (/dog), has its own unique counter that operates independently from one another. To ensure that the counter remains active, it is recommended to incorporate it into the layout structure.

One approach could be moving the counter functionality into a separate component, like ButtonCounter.vue, which can then be utilized within the layout:

// 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>

Check out the demo here!

The complete page gets re-rendered when Nuxt child routes are used

Answer №1

Similar questions

Guide on incorporating Bootstrap JS into HTML5 reusable web elements

Error came up as "backbone.radio.js" and it threw Uncaught SyntaxError since the token import appeared unexpectedly

Using an image as the background for a three.js scene may cause it to appear distorted

What sets apart posting data through an HTML form submission from posting data through an Ajax request?

How to dynamically adjust font size using Javascript

acquiring specific array elements in Vue.js

reactjs implementation of a virtualized list

Configuring environment variables in Vue CLI

Navigating a path and executing unique functions based on varying URLs: A guide

Why are the indicators and controls for Twitter-Bootstrap 5 carousel not functioning properly?

"What is the best way to include additional fields within a popover in an AngularJS application

Interference in the output of .innerHTML leads to disruption

Can CKEditor be integrated with Mutation Observer? If so, how can this be achieved?

JavaScript JQuery alert popup fails to display

Injecting arbitrary text following ?= in a web URL

A guide to organizing the alphabet into groups and displaying them in a Vue template

Warning in Google Script editor

The element div is not permitted as a child of the element h5 in this particular scenario

The Loopback access control list (ACL) for the admin role is failing to be

Incorrect behavior of responsive background images