Unknown order of nested routes
So i have a couple of thoughts on how to do this, but neither of them seems optimal.
tldr; When someone goes to
/time-7-15/latitude-40-50/ the page should render a list of all objects that have values in that range.
I need to have nested routes, let's call them filters. The filters are time, latitude and longitude. Each filter is based on ranges, so time can be 7-15 or 15-23 and latitude can be 40-50 or 50-60 (similar for longitude).
So examples of routes:
/time-7-15 or
/time-7-15/latitude-40-50 or
/latitude-40-50 or
/latitude-50-60/longitude-20-30 or
/time-15-23/latitude-40-50/longitude-20-30
etc etc, so by either one of the filters, but also you can omit some and have the other.
Based on the route, i need to have the resulting rendered list. I was thinking to have a shared layout and in the filters checkbox component have a v-if based on the route params but...
Because the order is not always the same (for instance you can have time and lat, or just lat without the time) i cannot do it like
because lat is not nested in time (but can be). What is the correct way of dealing with these types of nested routes?6 Replies
I believe the best way to handle such a problem would be using query params instead of actual route parameters like this:
/index?time=[7,15]&latitude=[40,50] or /index?latitude=[40,50]&longitude=[20,30]&time=[15,23].
These allow any order and can be optionnal, while still rendering a single page that can bind to the query using useRoute() so you can read and manipulate them based on your filters.Yes, but unfortunately i need to do it like in the original question per SEO requirements...
Did you try to get the filters by the prefix from the route ?
something like this:
And you can catch the route:
Yes, this is the current situation. However this is far from optimal, since it is hard to distinguish them 'object-wise'... It will also have translations, so checking for 'time' on 3 languages etc will feel like century old code... Was wondering if there was some wiser solution to this, would have thought someone made a 'filters url' thingy by now...
The issue is the lack of order.
Here's how I approached this problem and turned the route params into an object: https://stackblitz.com/edit/github-69lvd3-fjxybg?file=README.md
Yep, getting the params is not a problem... Just ordering them around and redirecting based on the filters is a pain... When you add translated routes to it, it becomes too cumbersome. Was hoping there was a file based solution to this...