Question 246153 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Difference between [slug].vue and […slug].vue

What is the difference between [slug].vue and [...slug].vue?

The docs are a bit unclear:

https://nuxt.com/docs/guide/directory-structure/pages#dynamic-routes
compared with

https://nuxt.com/docs/guide/directory-structure/pages#catch-all-route

where there is the slug with the three dots ....

The three dots version does not appear anywhere else, so I was wondering if this is just a name and it would be just the same like [$$$slug].vue or the normally used [slug].vue and the only thing that matters is that the name is within square brackets?

Tags:

2

Answers


  1. 0

    They are using [slug] for a single route (e.g. /something), while […slug] is used to catch all the possible routes (e.g. /something/anything/whatever is still valid)

    It uses array destructuring, so [$$$slug] wouldn’t be considered valid syntax.

    Login or Signup to reply.
  2. 0

    A dynamic route is for when you have something like /products/fancy-shoes, it being /products/[slug].vue in that case.

    A catch-all route can be used for:

    • having an unknown depth in your routes, something like /answers/user12/user15/user24/user48, imagine wanting to SSR a discussion on Reddit (usually recursive and with no definite end), you theoretically have no idea how deep it can be
    • safety guard, if a user has not landed on any prior routes, he can still arrive on the catch-all endpoint (in case you want something a bit more custom than a super generic 404 page)

    PS: this is a very niche use case as you can guess, depending on the type of app you’re building, you may never need that. But it’s available so that you don’t need to hack the config if you one day need it.

    Internally, it works like this: https://router.vuejs.org/guide/essentials/dynamic-matching.html#Catch-all-404-Not-found-Route

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search