[英]Render default child vue-router 4
I'd like to ask about render default child for view.我想问一下渲染默认子视图。 I know that exists topic with a similar problem but I'm pretty sure that it was for VUE2 and older vue-router.
我知道存在类似问题的主题,但我很确定它适用于 VUE2 和较旧的 vue-router。 I'm having trouble rendering the default child for view Category.
我在呈现视图类别的默认子项时遇到问题。 When I'd go to
<router-link:to="{ name: routeName, params: { category: item.id } }
everything render okay except <router-view />
it's empty...当我将 go 设置为
<router-link:to="{ name: routeName, params: { category: item.id } }
除了<router-view />
之外,一切都呈现正常,它是空的...
I came up with a solution with beforeUpdate(),beforeCreate() but it seems like reinventing the wheel.我想出了一个使用 beforeUpdate(),beforeCreate() 的解决方案,但这似乎是在重新发明轮子。 If I go to /category/{id} then to /category/{id}/room/{id} and go back one page, the default view will be rendered
如果我 go 到 /category/{id} 然后到 /category/{id}/room/{id} 和 go 后一页,默认视图将呈现
How to make the default child load after going to /category/{id}?转到 /category/{id} 后如何使默认子负载?
router.js路由器.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 - view 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('');
},
};
If your default component is Category
, you have to create the routes like this:如果你的默认组件是
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,
},
],
},
By default it will render the Category
component and if you add an id
to the url it will go the the Devices
component默认情况下,它将呈现
Category
组件,如果您将id
添加到 url 它将 go Devices
组件
I think I found a solution, a little messy, but it seems to be the best solution to this problem我想我找到了一个解决方案,有点乱,但它似乎是这个问题的最佳解决方案
{
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.