url match strict for seo

Environment

• Operating System: Darwin
• Node Version: v16.11.0
• Nuxt Version: 3.0.0-rc.3
• Package Manager: yarn@1.22.19
• Builder: vite
• User Config: app, router, css, typescript, modules, components, vueuse, unocss
• Runtime Modules: @vueuse/nuxt@8.5.0, @unocss/nuxt@0.33.5, @pinia/nuxt@0.1.9
• Build Modules: -

Reproduction

https://stackblitz.com/edit/github-ty2wyb?file=nuxt.config.ts,app.vue

Describe the bug

I used nuxt.config

router: {
    options: {
      strict:true
    }
  }

console error No match found for location with path "/art/a178/"

my pages tree

pages
├── art
   ├── a[id]
       └── index.vue
   |──b[id].vue

I think “/art/a178/” should match the index.vue ,and “/art/b17” match the b[id].vue. This is good for seo

Sorry for my poor English. Is the description clear.

Additional context

No response

Logs

No response

[danielroe]

Setting strict doesn’t default router to using trailing slashes - it only makes the router care about it: https://router.vuejs.org/api/#strict.

If you want to force trailing slashes, you will need to use pages:extend to modify the paths generated by Nuxt to include a trailing slash. See an example implementation at https://stackblitz.com/edit/github-ty2wyb-8cl4ib.

[YuLogun]

Daniel, thanks for an example.

Perhaps, you could also suggest what should be done in my case: My problem is that I do need slashes at the end of every path, but I don’t want to show a 404 error if the user navigates to a path without a slash. I want to redirect the user to a path with slashes in that case.

As I understand, redirect-module is not compatible with Nuxt 3.

What is the solution to implement redirect from a page without a slash to a page with it?

---

My current approach: I removed withTrailingSlash and router option from nuxt.config and tried to use it in Nuxt route middleware (middleware/redirect.global.ts).

export default defineNuxtRouteMiddleware((to) => {
  if (!to.path.endsWith('/') && to.path !== '/') {
    return navigateTo(withTrailingSlash(to.fullPath, true), {
      redirectCode: 301,
    });
  }
});

Is it the way to do it?