Nuxt•2y ago

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/

/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

/time-7-15

/time-7-15/latitude-40-50

/time-7-15/latitude-40-50

/latitude-40-50

/latitude-40-50

/latitude-50-60/longitude-20-30

/latitude-50-60/longitude-20-30

/time-15-23/latitude-40-50/longitude-20-30

/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

index/
  [...time].vue
  [...time]/
    [...lat].vue

index/
  [...time].vue
  [...time]/
    [...lat].vue

because lat is not nested in time (but can be). What is the correct way of dealing with these types of nested routes?

Kérunix•5/27/24, 11:54 AM

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]

/index?time=[7,15]&latitude=[40,50]

/index?latitude=[40,50]&longitude=[20,30]&time=[15,23]

/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()

useRoute()

so you can read and manipulate them based on your filters.

KKérunix I believe the best way to handle such a problem would be using query params inst...

Aleksandar BrkićOP•5/27/24, 2:46 PM

Yes, but unfortunately i need to do it like in the original question per SEO requirements...

AAleksandar Brkić Yes, but unfortunately i need to do it like in the original question per SEO req...

Anjjar•5/27/24, 5:05 PM

Did you try to get the filters by the prefix from the route ?
something like this:

index/
  [...filters].vue

index/
  [...filters].vue

And you can catch the route:

// Route example : "/time-15-23/latitude-40-50/longitude-20-30"
const { filters} = route.params; // result = ["time-15-23", "latitude-40-50", "longitude-20-30"]

// Route example : "/time-15-23/latitude-40-50/longitude-20-30"
const { filters} = route.params; // result = ["time-15-23", "latitude-40-50", "longitude-20-30"]

AAnjjar Did you try to get the filters by the prefix from the route ? something like thi...

Aleksandar BrkićOP•5/28/24, 7:48 AM

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...

AAleksandar Brkić Yes, this is the current situation. However this is far from optimal, since it i...

Anjjar•5/28/24, 10:32 AM

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

AAnjjar The issue is the lack of order. Here's how I approached this problem and turned ...

Aleksandar BrkićOP•5/28/24, 11:12 AM

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...

Unknown order of nested routes

Similar Threads

Similar Threads

Similar Threads