Rendering is displayed twice in Codesandbox-CodePudding

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>

CodePudding user response：

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

<template>
  <ul >
    <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>