8

I'm looking for a way to make sure that all of my urls end with a trailing slash (so first check if there is already a trailing slash at the end, and if not add one).

I have tried with nuxt-redirect-module, and it works adding the slash but then it leads to an infinite redirect

redirect: [
  {
    from: '^(.*)$',
    to: (from, req) => {
      let trailingUrl = req.url.endsWith('/') ? req.url : req.url + '/'
      return trailingUrl
    }
  }
]

Any insight will be welcome. Thanks!

Joe82
  • 1,357
  • 2
  • 24
  • 40

3 Answers3

9

The following regex handles query string as well:

redirect: [
    {
        from: '^(\\/[^\\?]*[^\\/])(\\?.*)?$',
        to: '$1/$2',
    },
],
maikel
  • 1,135
  • 1
  • 12
  • 9
5

You can try to match only those URLs that do not end with a slash:

redirect: [
    {
        from: '^.*(?<!\/)$',
        to: (from, req) => req.url + '/'
    }
]
antonku
  • 7,377
  • 2
  • 15
  • 21
  • That's exactly what I needed. Thanks! – Joe82 Jan 24 '19 at 13:01
  • 1
    How can I "not match" routes that end with filenames, such as .jpg, etc.? – Manas Apr 13 '19 at 23:49
  • 2
    @Manas You can specify the non-matching file extensions in the negative lookbehind part of regex, e.g: `^.*(?<!\.(png|jpg))$` – antonku Apr 14 '19 at 08:44
  • I have set up a bounty to a question related with this. You can check it out at https://stackoverflow.com/questions/54346345/nuxt-js-force-trailing-slash-at-the-end-of-all-urls – Joe82 May 14 '19 at 17:03
1

I had the same problem, but I didn't want to use the redirects. I tried a lot of solutions, but finally it turned out that adding a double slash to the routing path had the desired effect:

  router: {
    prefetchLinks: false,
    middleware: 'navigation',
    routeNameSplitter: '/',
    extendRoutes(routes, resolve) {
      routes.push(
        {
          name: 'kaufen',
          path: '/kaufen//',
          component: resolve(__dirname, 'pages/listing/index.vue'),
        },
        {
          name: 'mieten',
          path: '/mieten//',
          component: resolve(__dirname, 'pages/listing/index.vue'),
        },

This results in:

https://example.com/kaufen/?alternate=true&ignoreToplisting=false

It seems very hacky, but it does the trick!

GerritElbrink
  • 195
  • 3
  • 9