Set priority for dynamic routes with same parent folder

Question

I have this folder setup:

consultations/
--| _id/
-----| _slug.vue
--| _filter.vue

Everything works fine, but when I go to /consultations/1234 it gets captured by _filter How can I force it to be captured by _slug.vue instead?

Demigod

Answer 1

More details after the questions in the comments

Yeah, the wording of this is a bit messy IMO, but you do have:

• path variable like /consultations/1234, accessed with this.$route.params.id
• query param like /consultations?age=today, accessed with this.$route.query.age

Not sure if this blog post may clarify it a bit.

A bit confusing but really not the same thing!

---

From your routes, if you want to access the _slug.vue, you need to reach for /consultations/1234/my-cool-slug.

Otherwise, you need to check your folder structure again or change how _filter is caught.
Don't you want to have it as a query param like /consultations?age=today&type=dentist?
You may have several filters and not just a single one.

TLDR: you cannot have a priority, it is decided by the schema you're providing and it will always take the shortest route matching as far as I know.

Grandpa

Thanks. _filter is actually doing just that (The query params ) Interesting to know about the shortest path. This helps a lot thanks – Demigod

Isn't there anything I can do with extendRoutes though? – Demigod

@AymaneShuichi I've edited my answer. And no, extendRoutes will not help you here. I mean, you probably can achieve this in some hacky way but I'm not sure this is the best way to go if you want something clean and not confusing (filters are already confusing by nature). – Grandpa