Vue nested routes not displaying their components and no errors

Question

When I access URL profile/admin, I see the profile component, however, if I try URL profile/admin/locations or profile/admin/map, I don't load the Map or Locations components. Any ideas why?

The routes in question:

import Home from './components/Home.vue';
import Profile from './components/Profile.vue';
import Map from './components/Map.vue';
import Locations from './components/Locations.vue'

export const routes = [
    { path: '', component: Home, name: 'Home'},
    { path: '/profile/:username', component: Profile, name: 'Profile', chilren: [
        { path: '/profile/:username/locations', component: Locations, name: 'Locations'},
        { path: '/profile/:username/map', component: Map, name: 'Map'}
    ]},
];

Profile component template:

<template>
    <div class="wrapper">
        <p>Profile</p>
        <router-view></router-view>
    </div>
</template>

Location component template:

<template>
    <div class="wrapper">
        <p>Location</p>
    </div>
</template>

Map component template:

<template>
    <div class="wrapper">
        <p>Location</p>
    </div>
</template>

AndrewShmig · Accepted Answer · 2019-01-20 08:24:50Z

3

You have a typo in your routes - chilren instead of children.

You don't need to specify full path in children routes. Correct way of doing:

export const routes = [
    { path: '', component: Home, name: 'Home'},
    { path: '/profile/:username', component: Profile, name: 'Profile', children: [
        { path: 'locations', component: Locations, name: 'Locations'},
        { path: 'map', component: Map, name: 'Map'}
    ]},
];

edited Jan 20, 2019 at 8:24

answered Jan 19, 2019 at 9:05

AndrewShmig

4,9198 gold badges42 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Onyx Over a year ago

You're absolutely correct. Weird that I didn't get any errors about it though.

Collectives™ on Stack Overflow

Vue nested routes not displaying their components and no errors

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related