[Vuejs]-Vue Router – Nested Routes Not Working as Expected

by

1👍

✅

App component is showing twice because it is mounted twice. First it is mounted in main.js when you create the app. Then it is mounted in router-view as the route component. To avoid this, you shouldn’t use the App component in router, instead make another Layout component where you define the page layout to be used by the vue-router. Also, this will allow the scenario where, while having a single entry point for your app (App), you can define different layouts for different routes, if needed.

Regarding the first question, the content of Topic1 component is not shown when navigating to Sub route, because it is wrapped in router-view. router-view displays only the content of the current route component. Avoid placing any content in router-view as it will be replaced on route navigation. This will work:

<h1>Topic1</h1>

<h2>Topic1 Content</h2>
<p>
    <router-link to="/topic1/Sub">/topic1/sub</router-link>
</p>
<router-view> </router-view>

Here is the working codesandbox.
Also I refactored a bit your router index.js.

👤Igor Moraru

Leave a comment