Need Assistance with Rendering Default Child View in Vue
I am currently facing an issue with rendering the default child view for the Category view. I have come across a similar problem discussed on Stack Overflow, but it seems to be related to VUE2 and older versions of vue-router. When navigating to
<router-link :to="{ name: routeName, params: { category: item.id } }<router-view />, which remains empty...
I have tried using beforeUpdate() and beforeCreate() as a workaround, but it feels like I am overcomplicating things. If I visit /category/{id}, then move to /category/{id}/room/{id} and return one page back, the default view gets rendered.
Is there a way to ensure that the default child loads when navigating to /category/{id}?
router.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
<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('');
},
};