I am currently working on enhancing the navigation experience of an existing vueJS application that utilizes Vue Router. When working with React, I typically structure breadcrumbs in the following manner:
<Breadcrumbs>
<Route path="/users">
<Breadcrumb>
<FaUsers />
Users
<Breadcrumb>
<Route path="/users/new">
<Breadcrumb>
<FaUserPlus />
Add
</Breadcrumb>
</Route>
</Route>
</BreadCrumb>
This allows for easy definition of all breadcrumbs within a single HTML page. I would like to implement a similar approach using VueJS by creating a breadcrumb component that can be inserted into
<router-view name="breadcrumbs" />const routes = createRouter({
routes: [{
path: "/users",
components: {
breadcrumbs: Breadcrumbs,
default: Users
},
children: { ... }
}, ...]
})
However, I have been unable to locate a built-in Route component in Vue that specifically handles route matching within HTML. Is there an alternative solution that allows me to avoid creating individual Vue components for each breadcrumb pattern?