VUE Routes - Nested routes do not render

Question

I'm hoping the community can shed some light on this matter. I am looking to nest some routes in my Vue app (this is my first vue project). My main routes are working, including the parent route Profile.

I have followed the documentation and gone over the code along with some videos as well. Cannot find the fault.

I'll give links to the repo instead of pasting the code.

router.js here - https://github.com/anaivanm/vue-tw/blob/master/src/router.js

all .vue files are in views, like so: https://github.com/anaivanm/vue-tw/tree/master/src/views

I had the ones I was trying to nest under Profile in a views/profile folder, but that didn't work either.

And you can see the navbar with the router-link tag here: https://github.com/anaivanm/vue-tw/blob/master/src/components/SiteHeader.vue

I get no errors, it just renders a blank space, even if the path is there in the correct manner e.g. http://localhost:8080/#/profile/saved

The Profile page appears, all the other children - NOPE.

Your links don't work - can you make sure they are public? Or just post the code of your router.js — Mike Harrison
Have you tried removing the beginning slash to your path property in each of your routes? I have never used a beginning slash like that, especially for child routes. — Mike Harrison
Yes, I have. Still doesn't work. Instead all it renders is the profile page - the parent. — Ana Ivan

Chase DeAnda Chase DeAnda · Accepted Answer · 2019-11-15T20:19:11

According to the nested route docs, to get nested routes working you need to add a <router-view></router-view> to the Parent component that the nested routes will render in (Profile.vue). I don't see a <router-view></router-view> in your profile page, it should look like:

<template>
  <div>
    Profile page.
    <router-view></router-view>
  </div>
</template>

VUE Routes - Nested routes do not render

1 Answers