Vue 嵌套路由不显示其组件且没有错误

Question

当我访问 URL profile/admin 时，我看到了配置文件组件，但是，如果我尝试 URL profile/admin/locations 或 profile/admin/map，我看不到t 加载地图或位置组件。有什么想法吗？

有问题的路线：

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>

地图组件模板：

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

Answer 1

您的路线有错字 - 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'}
    ]},
];

Vue 嵌套路由不显示其组件且没有错误

Vue nested routes not displaying their components and no errors

javascript

vue.js

vue-router

vue-component

vuejs2