Reputation: 5782
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>
Upvotes: 0
Views: 300
Reputation: 4923
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'}
]},
];
Upvotes: 3