[英]Render default child vue-router 4
我想问一下渲染默认子视图。 我知道存在类似问题的主题,但我很确定它适用于 VUE2 和较旧的 vue-router。 我在呈现视图类别的默认子项时遇到问题。 当我将 go 设置为<router-link:to="{ name: routeName, params: { category: item.id } }
除了<router-view />
之外,一切都呈现正常,它是空的...
我想出了一个使用 beforeUpdate(),beforeCreate() 的解决方案,但这似乎是在重新发明轮子。 如果我 go 到 /category/{id} 然后到 /category/{id}/room/{id} 和 go 后一页,默认视图将呈现
转到 /category/{id} 后如何使默认子负载?
路由器.js
{
path: '/category/:category',
name: 'Category',
props: true,
component: Category,
children: [
{
path: '',
name: 'FavouriteDevicesInCategory',
component: Devices,
props: true,
},
{
path: 'room/:room',
name: 'Devices',
component: Devices,
props: true,
},
],
},
Category.vue - 查看
<template>
<div class="control">
<div class="left">
[...]
</div>
<div class="right">
<router-view />
</div>
</div>
</template>
<script>
export default {
props: ['category', 'room'],
/** generate default router-view */
beforeUpdate() {
this.$router.push('');
},
beforeCreate() {
this.$router.push('');
},
};
如果你的默认组件是Category
,你必须像这样创建路由:
{
path: '/category',
name: 'Category',
props: true,
component: Category,
children: [
{
path: '/:categoryId',
name: 'FavouriteDevicesInCategory',
component: Devices,
props: true,
},
{
path: 'room/:roomId',
name: 'Devices',
component: Devices,
props: true,
},
],
},
默认情况下,它将呈现Category
组件,如果您将id
添加到 url 它将 go Devices
组件
我想我找到了一个解决方案,有点乱,但它似乎是这个问题的最佳解决方案
{
path: '/category/:category',
// name: 'Category',
props: true,
component: Category,
children: [
{
path: '',
name: 'Category',
component: Devices,
props: true,
},
{
path: 'room/:room',
name: 'Devices',
component: Devices,
props: true,
},
],
},
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.