当我访问 URL profile/admin
时,我会看到配置文件组件,但是,如果我尝试 URL profile/admin/locations
或 profile/admin/ map
,我不加载 map 或位置组件。有什么想法吗?
有问题的路线:
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'}
]},
];
配置文件组件模板:
<template>
<div class="wrapper">
<p>Profile</p>
<router-view></router-view>
</div>
</template>
位置组件模板:
<template>
<div class="wrapper">
<p>Location</p>
</div>
</template>
map 组件模板:
<template>
<div class="wrapper">
<p>Location</p>
</div>
</template>
最佳答案
您的 route 有拼写错误 - chilren
而不是 children
。
您不需要在子路由中指定完整路径。正确的做法:
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'}
]},
];
关于javascript - Vue 嵌套路由不显示其组件并且没有错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54265159/