Title: Why does every component in my page appears twice?
Tags: javascript;vue.js;vue-router
Question: I have created a sort of First page for my project, but I don't know why it renders everything twice on my page:
here is my First.vue component that is used by the router as the first page:
<template&gt;
<h1&gt;Bienvenue</h1&gt;
<router-view&gt;</router-view&gt;
<div class=&quot;routing&quot; v-if=&quot;this.$route.path == '/'&quot;&gt;
<router-link to='/app'&gt;Go to application</router-link&gt;
<br&gt;
<router-link to='/test'&gt;Go to test</router-link&gt;
</div&gt;
</template&gt;
and here is what I get on the page when I npm run serve
Does anyone knows where it comes from?
UPDATE
When I delete the router-view element, the components appear once but when I click on one of the links, it changes the URL of the page but the page in itself is not showing the component.
And when I try to put everything in my router-view, like this:
<template&gt;
<router-view&gt;
<div class=&quot;routing&quot; v-if=&quot;this.$route.path == '/'&quot;&gt;
<h1&gt;Bienvenue</h1&gt;
<router-link to='/app'&gt;Go to application</router-link&gt;
<br&gt;
<router-link to='/test'&gt;Go to test</router-link&gt;
</div&gt;
</router-view&gt;
</template&gt;
it appears once, but like the other case, when I click on a link, it is just changing the URL and not the page.
Here is my index.js to show you how my routes are defined:
import {createRouter, createWebHistory} from 'vue-router'
import App from '../App.vue'
import Test from '../Views/Test.vue'
import First from '../Views/First.vue'
export const router = createRouter({
history: createWebHistory(),
routes: [
{
path:'/',
name: 'First',
component: First,
},
{
path:'/test',
name: 'Test',
component: Test
},
{
path:'/app',
name: 'App',
component: App
}
Just to clarify what results I expect from my app:
When I run the project, I want to launch on a page with just a header saying 'Hello' at the top of the page and two links where I can either click on 'Go to the application' or 'Go to test'.
Then, when I click on one of the links, I want to see the content of the component (so either test or the app), but I don't want to see the header and the links anymore.
Comment: Hi, Why you are using `router-view` in here? Can you share the script part of the component.

Comment: Can you add how you have defined your routes?

Comment: Are you getting any error on console, when not using router-view and clicking the link.

Comment: Yes, you mainly use router view in components, when dealing with child components.

Comment: @YashMaheshwari when I delete the `router-view` element, when I click for exemple on the 'Go to test' element, it changes the URL of the page but it doesn't show the component `Test.vue`

Comment: An also the `First.vue`component doesn't have a script for now, it only contains a `template`

Comment: @YashMaheshwari yes I have edited my post!

Comment: @YashMaheshwari No i don't have any error message, even when I don't use router-view

Comment: I tried adding router view in my components and deleting it from the first page but when I do that, the component doesn't load, even if the URL is changing

Comment: your doing it wrong,  should be in `App.vue`, not in every page, its job is to render/place the current view/route component, then the path:'/app', the route shouldn't be calling App.vue


Here is another answer: Update with sample code or you can refer to live code  here.
// App.vue
const First = {
template: `<div class = &quot;container&quot; id=&quot;app&quot;&gt;
<h1&gt;Hi from First</h1&gt;
<hr&gt;
<router-link to=&quot;/foo&quot;&gt;Foo</router-link&gt;
<router-link to=&quot;/bar&quot;&gt;Bar</router-link&gt;
</div&gt;
const Foo = { template: '<div&gt;foo</div&gt;' }
const Bar = { template: '<div&gt;bar</div&gt;' }
const routes = [
path:'/',
name: 'First',
component: First,
default: First
},
{
path:'/foo',
name: 'Foo',
component: Foo
},
{
path:'/bar',
name: 'Bar',
component: Bar
}
const router = new VueRouter({
routes
const app = new Vue({
router
}).$mount('#app')
// main.js
<div id=&quot;app&quot;&gt;
<!-- route outlet --&gt;
<!-- component matched by the route will render here --&gt;
<router-view&gt;</router-view&gt;
</div&gt;
Comment for this answer: When doing that it still renders all the element twice and when I click on a link it still shows the links and the 'Hello first' title which I don't want to show
Comment for this answer: when I put $ in $mount, it gives me a `TypeError: Object(...)(...).use(...).$mount is not a function`

Here is another answer: I am not sure but try this:
path: &quot;/app&quot;,
component: () =&gt; import(&quot;../App.vue&quot;),
name: &quot;App&quot;
},
path: &quot;/test&quot;,
component: () =&gt; import(&quot;../Views/Test.vue&quot;),
name: &quot;Test&quot;
},
path: &quot;/&quot;,
component: () =&gt; import(&quot;../Views/First.vue&quot;),
name: &quot;First&quot;
Comment for this answer: whoops, sorry. this is not my style so... but you can check this out: https://github.com/KnowsCount/tutter/tree/master/src/router
Comment for this answer: I just tried like this, with and without the `` but it does the same thing than before

{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 2, 'CommentCount': 10, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2021:00:05/10/21', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><vue.js><vue-router>', 'Title': 'Why does every component in my page appears twice?', 'ViewCount': 191, 'id': 67469826, 'user_AboutMe': None, 'user_AccountId': 21280446.0, 'user_DisplayName': 'Lorine', 'user_Reputation': 119.0, 'user_Views': 27.0, 'user_id': 15658943.0}}