1

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?

kissu
  • 40,416
  • 14
  • 65
  • 133
Aymane Shuichi
  • 460
  • 5
  • 14

1 Answers1

2

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.

kissu
  • 40,416
  • 14
  • 65
  • 133
  • Thanks. _filter is actually doing just that (The query params ) Interesting to know about the shortest path. This helps a lot thanks – Aymane Shuichi Jul 21 '21 at 09:45
  • Isn't there anything I can do with extendRoutes though? – Aymane Shuichi Jul 21 '21 at 09:46
  • @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). – kissu Jul 21 '21 at 09:57