vue.jsvuejs3renderingvue-routercodesandbox

Rendering is displayed twice in Codesandbox


I'm used to using Codesandbox, but for the first time like I said in the title the rendering is displayed two times and I don't understand how to fix that. For a simple example, the Contact component is very simple but the title and the button are displayed twice, you can see also them in my codesanbox link if you want. Maybe I do something wrong with Vue because I'm learning it? https://codesandbox.io/s/vue-router-with-rick-and-morty-api-qdfe12?file=/src/views/Contact.vue

<template>
  <h2>Contact</h2>
  <button @click="home()">Home</button>
</template>

<script>
export default {
  name: "Contact",
  methods: {
    home() {
      this.$router.push({ name: "Home" });
    },
  },
};
</script>

<style>
</style>

Solution

  • You should remove <router-view></router-view> from the Navbar component :

    <template>
      <ul class="navlist">
        <li>
          <router-link to="/">Home</router-link>
        </li>
        <li>
          <router-link to="/about">About</router-link>
        </li>
        <li>
          <router-link to="/contact">Contact</router-link>
        </li>
    
      </ul>
    </template>
    
    <script>
    export default {
      name: "Nav",
    };
    </script>
    
    <style>
    </style>