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