I've encountered a situation where I have deeply nested routes in my routes.js file. The code snippet below shows that depending on the route, I need to render different components. For instance, if the route is for products, I should render the Products.vue component. However, if the route goes deeper, I need to render the EmptyRouterView.vue component which contains the template
<router-view></router-view>{
path: '/products',
name: 'products',
component: {
render(c) {
if (this.$route.name === 'products') {
return c(require('pages/Products/Products.vue').default)
} else {
return c(require('components/EmptyRouterView.vue').default);
}
}
},
meta: {
requiresAuth: true,
allowedPositions: '*'
},
children: [
// Scan product to get info
{
path: '/products/search-product',
name: 'search-product',
component: () => import('pages/Products/SearchProduct.vue'),
meta: {
requiresAuth: true,
allowedPositions: '*'
}
},
....
]
}
I'm curious if there's a more concise or efficient way to achieve this. Perhaps something along these lines (even though I understand that using `this` in an arrow function is not valid):
component: () => {
this.$route.name === 'products' ? require('pages/Products/Products.vue').default : require('components/EmptyRouterView.vue').default
}
Alternatively, do you think there might be another approach altogether to handle this scenario?
If you require any further information, feel free to ask and I'll provide it. Thank you!