Add trailing slash to the every route path of the project in nuxt.js

Question

There is a requirement of SEO optimization in nuxt.js project. It requires every route inside the project need add a trailing slash. How to solve the problem?

By the way, there is a question about it, but the accepted answer is not right for me. the question link is here:

score 1 · Answer 1 · answered Feb 20 '19 at 12:41

1

Hi :) You need install @nuxtjs/redirect-module and add below rule to nuxt.config.js.

redirect: [
    {
        from: '^.*(?<!\/)$',
        to: (from, req) => req.url + '/'
    }
]

My answer is based on antonku's answer.

answered Feb 20 '19 at 12:41

kanapka94

51
4

Hi, it's working nicely but only if request is coming from browser address bar. When I click a link within the page the rules is not working as I expected. Working mode is universal. Do you have any idea about it ? – Yasin Yörük Oct 15 '20 at 14:36
Oh yes :) Simply, just add trailing slash by yourself or set **router: { trailingSlash: true }** in **nuxt.config.js** :) This works only in address bar case because then the request passes through the server. Click on the page is javascript router behaviour. More info here: [nuxt docs](https://nuxtjs.org/guides/configuration-glossary/configuration-router#trailingslash) – kanapka94 Oct 15 '20 at 18:12
Thanks. Actually I tried trailing slash attribute in router object. But when I set this attribute as true the other routes doesn’t work. For example; domain.com/contact/ won’t work. I’m still trying to figure out this. – Yasin Yörük Oct 15 '20 at 19:33

score 0 · Answer 2 · edited Jan 13 '23 at 08:18

0

The answer from @kanapka94 is correct but incomplete. You need to add the module to your modules attribute in your nuxt configuration, e.g:

modules: [
    '@nuxtjs/redirect-module',
]

edited Jan 13 '23 at 08:18

Eric Aya

69,473
35
181
253

answered Jan 13 '23 at 07:40

clapas

1,768
3
16
29

Add trailing slash to the every route path of the project in nuxt.js

2 Answers2