javascript - vue-router:嵌套命名视图问题。附加组件不可见
问题描述
我在 vue-router 文档中找到了这个例子:
const router = new VueRouter({
mode: 'history',
routes: [{
path: '/settings',
// You could also have named views at tho top
component: UserSettings,
children: [{
path: 'emails',
component: UserEmailsSubscriptions
}, {
path: 'profile',
components: {
default: UserProfile,
helper: UserProfilePreview
}
}]
}]
})
我试图做这样的事情:
https://jsfiddle.net/pt9o6h8e/
const router = new VueRouter({
mode: 'history',
routes: [{
path: '/settings',
components: {
default: UserSettings,
test: TestComponent
}
children: [{
path: 'emails',
component: UserEmailsSubscriptions
}, {
path: 'profile',
components: {
default: UserProfile,
helper: UserProfilePreview
}
}]
}]
})
但 TestComponent 不可见。为什么?
解决方案
当你像这样指定你的路线时,
{
path: '/settings',
// You could also have named views at tho top
components: {
default: UserSettings,
test: TestComponent
}
}
UserSettings
并且TestComponent
被认为是同级组件,因此在渲染时,它将在您在最顶层 div 上指定router-view
的默认值旁边查找一个名为.router-view
#app
但是,您将模板放入
<router-view name="test" />
其中,UserSettings
因此找不到router-view
要渲染TestComponent
的对象。
要解决此问题,请将test
路由器视图UserSettings
从#app
.
<div id="app">
<h1>Nested Named Views</h1>
<router-view></router-view>
<router-view name="test" class="us__content us__content--helper"/>
</div>
或者,如果您想将其保留在内部,请通过移动您的任一子路由来UserSettings
更改您声明它的方式。test: TestComponent
请参阅工作示例。
推荐阅读
- spring - 禁用 Open Service Broker API 的 ServiceBrokerExceptionHandler
- bootstrap-4 - 单击按钮时避免 onClickRow 表引导
- javascript - Navigator.permissions.query:地理位置 onChange 在 Firefox 中不起作用
- python - 无法在 Conda env 中安装 Gensim - 找不到 noarch 目录
- r - 使用 r (dplyr) 跨类别和日期求和
- javascript - React Hooks,重新渲染并保持相同的状态 - 它是如何工作的?
- angular - Angular Material Mat-select 无法正常工作
- c# - 如何部署使用特定 SDK C# 创建的软件?
- python - 在二叉树python结构中创建根节点
- android - 添加谷歌助手自定义操作并检测它