Nuxt.js - add trailing slash to URL's with params

Question

This question is based in this previous one

I want all my URL's to end with slash for SEO reasons. So far I have this function working with nuxt-redirect-module

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

This checks the url, and adds a / at the end in case that there is not. The problem is when the url has params at the end.

So right now, this redirects

https://example.com/folder to

https://example.com/folder/ (intended behaviour)

But with params, right now it works like this:

https://example.com/folder?param=true to

https://example.com/folder?param=true/ (it adds the / after the params)

QUESTION

Which would be the way to make it so it would redirect instead from

https://example.com/folder?param=true to

https://example.com/folder/?param=true (so it would add the / at the end of the url but before the params)

Thanks in advance!

niccord · Accepted Answer · 2019-05-21 13:01:55Z

2

+50

redirect: [
    {
        from: '^[\\w\\.\\/]*(?<!\\/)(\\?.*\\=.*)*$',
        to: (from, req) => {
            const matches = req.url.match(/^.*(\?.*)$/)
            if (matches.length > 1) {
                return matches[0].replace(matches[1], '') + '/' + matches[1]
            }
            return matches[0]
        }
    }
]

Check the first regex here: https://regex101.com/r/slHR3L/1

Thanks to @Seybsen for the final hint :)

edited May 21, 2019 at 13:01

answered May 19, 2019 at 20:29

niccord

8445 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

10 Comments

Joe82 Over a year ago

Thanks for the answer. It seems that there is something wrong with that regexp in JS. It outputs this error SyntaxError: Invalid regular expression: /^[w./]*(?<!/)(?.*=.*)*$/: Invalid group

niccord Over a year ago

backslashes are important in order to escape characters e.g. \w has a different meaning from w, the dot character means "everything" but \. it's used to specify the dot character itself. Are you sure you kept the right format?

Joe82 Over a year ago

Yep, I copied the expression as it is. I searched a bit and it seems there is some differences when it comes to regexp applied to JS and that could be the source of the error (something like this example stackoverflow.com/questions/4200157/… )

Seybsen Over a year ago

Since the regex is a string you need to double the backslashes.

Sascha Over a year ago

Note from the docs:

The redirect module will not work in combination with nuxt generate. Redirects are realized through a server middleware, which can only react when there is a server running.

|

maikel · Accepted Answer · 2020-02-13 19:31:07Z

2

The following might be simpler and does the same as far as I can see:

redirect: [
    {
        from: '^(\\/[^\\?]*[^\\/])(\\?.*)?$',
        to: '$1/$2',
    },
],

answered Feb 13, 2020 at 19:31

maikel

1,1651 gold badge12 silver badges10 bronze badges

Comments

Иванов Егор · Accepted Answer · 2021-05-14 12:18:20Z

0

I wrote it like this. This code catch all unsigned urls ? and / at the end of the line. I think that's enough

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

answered May 14, 2021 at 12:18

Иванов Егор

11 bronze badge

Collectives™ on Stack Overflow

Nuxt.js - add trailing slash to URL's with params

3 Answers 3

10 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

10 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related