I'm in the process of creating "overview" pages for different sections within my app, each triggered from the root of that particular section.
For example, localhost/hi should display the HiOverview component,
And localhost/he should display the HeOverview component. Since there are multiple sections like this, I want to avoid assigning components to constants and reusing them across routes. Instead, I aim to handle everything dynamically within a single route.
However, I'm facing challenges with creating the Components in the beforeEnter hook. Each route object expects a component, but I simply want to determine the component based on the route. (The sectionsWithOverview array contains the names of routes where an overview is required).
const router = new Router({
linkActiveClass: 'active',
mode: 'history',
routes: [
{ path: '/:section',
component: Placeholder,
beforeEnter: (to, from, next) => {
const section = to.params.section
if (sectionsWithOverview.includes(to.params.section)) {
next({ name: `${to.params.section}Overview` })
} else {
next()
}
},
}
Can anyone provide assistance? How can I conditionally assign a component onBeforeEnter and then route to that specific Component? It currently works when I declare each SectionOverview beforehand, but that defeats the purpose of my approach.
Thank you for any guidance :)