I need guidance on how to handle the routing setup in this specific scenario:
Below is the HTML structure that iterates through categories and items within those categories. The <router-view> is nested inside each category element, so when an item is clicked, it should only open within the corresponding category.
<ul>
<li v-for="cat in categories">
<ul>
<li v-for="business in filteredByCat">{{business.name}}</li>
</ul>
<router-view v-if="..."></router-view>
</li>
</ul>
The defined routes are as follows:
{
path: '/businesses',
name: 'Directory',
component: Directory,
children: [{
path: ':listing',
name: 'Listing',
component: Listing
}]
}
Visualization:
https://i.stack.imgur.com/3V9KD.png
How can I pass the data of the clicked item to the router-view? I've tried using props but realize it may not work if the user accesses details directly via URL.
I attempted fetching the item like this:
methods: {
finalItem ($route) {
var match = this.businesses.filter((business) => {
return business.link === $route.params.listing
})
return match[0]
}
}
This method doesn't seem to be effective. Is there an alternative approach to passing the data in a way that retains even when accessing details directly? This is my main concern. (I understand the repetitive use of <router-view> is not ideal coding practice, but I'm unsure how to address this given my current layout. Open to suggestions on improving this as well.)