( Nuxt's Vue-router ) How to differentiate path ending with "/" and without

Question

Using the extendRoutes attribute for nuxt's router, I am attempting to differentiate paths ending with a slash and paths that do not. This is due to how the CMS we are using handles paths.

I could differentiate them by distinguishing the overview page as a path ending in /all or /overview, but it's not ideal.

I have a _slug.vue on my pages directory

(Should match /articles/some-article-1)

And I have a route for the articles overview with nested categories.

(Should match /articles/ /articles/category/ and /articles/category/category-of-category/)

This appears to work,

            routes.unshift({
                name: 'articles',
                path: '/articles/:category([^/]*/)',
                component: resolve(__dirname, 'pages/-overview.vue')
            })

but raises an error:

Expected "category" to match "[^/]*/", but received "dfdf%2F

How do I properly match paths terminating in slash?

user_5030627 · Answer

Have you tried this?

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      name: 'articles',
      path: '/articles/:category',
      strict: true,
      component: resolve(__dirname, 'pages/-overview.vue')
    },
   
   ...
  ]
})

// or, for all routes
const router = createRouter({
  history: createWebHistory(),
  routes: [
    ...
  ],
  strict: true
})

https://router.vuejs.org/guide/essentials/route-matching-syntax.html#sensitive-and-strict-route-options

( Nuxt's Vue-router ) How to differentiate path ending with "/" and without

1 Answers