javascript - Vue嵌套路由不显示其组件且没有错误
问题描述
当我访问 URLprofile/admin
时,我会看到配置文件组件,但是,如果我尝试 URLprofile/admin/locations
或profile/admin/map
,我不会加载 Map 或 Locations 组件。任何想法为什么?
有问题的路线:
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>
解决方案
您的路线中有错字 -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'}
]},
];
推荐阅读
- php - 禁用特定日期
- ios - 展开唯一点击的单元格并折叠其他单元格
- javascript - Moment js在后天不显示错误消息
- java - 用于物联网集线器设备固件更新的 Rest api
- javascript - 表格添加行、编辑行、保存行、删除行使用HTML、CSS、JS
- java - 在运行时错误在 ARCore 数据库中添加图像
- apache - 无法从另一台计算机访问 apache2 虚拟主机
- mysql - 如何使用 INNER/LEFT JOIN 排除记录
- php - fwrite(): send of 6 bytes failed with errno=10054 现有连接被远程主机强行关闭
- java - 为什么 Java CMS 垃圾收集器不允许已用堆大小增长到可用堆大小?