0

I am using Nuxt.js v2.15 and I am noticing some strange issues regarding the routes. It seems that only certain routes have a trailing slash while others do not. I have even renamed some of the files and the slash went away, but once I renamed the file back to its original name, the slash in the route came back.

I am currently using the router config trailingSlash: false as well as middleware that redirects to the route without a slash.

When accessing the pages via the Nuxt router, the trailing slash is removed and all looks good. However, once the page is refreshed, the redirect happens and an error shows up. The router continues to try to resolve this and eventually brings me to the page with the trailing slash, but because trailingSlash: false is set, the page is not working and just shows an error.

I have even taken page files out of folders to put them at the top level of the pages/ directory to see if that would work. It does not.

This is pretty frustrating and it seems that no solution that I have found on the internet, including Stack Overflow, works to fully resolve this issue. I have read what seem to be similar issues here on Stack Overflow that have some suggested solutions. None of them worked to resolve this issue entirely... especially after refreshing the page.

Does anyone know of a solution that works when using Nuxt router AND on a hard refresh?

It's as if the browser itself is forcing the slash while the application is trying to remove the slash.

Nicholas Gati
  • 101
  • 1
  • 2
  • 13
  • I've asked a few questions on that exact subject, you can make a search on my profile. TLDR being: it depends on the place where you host your app. Is the behavior happening when you build your app locally? Be sure to fully understand the consequences too: https://nuxtjs.org/docs/configuration-glossary/configuration-router#trailingslash – kissu Aug 11 '22 at 20:41
  • @kissu Thanks for your comment. Yea, that's what I am starting to think as well. I asked our backend engs to take a look at how this is set up in AWS. We use server-side rendering and maybe there is something in the AWS config that is messing with this. It does happen locally too though. The strange thing is that it's not consistent across all pages. It's only 3 pages for some reason. In terms of the config, I read up on it and created middleware which handles the redirect but once the page is refreshed, everything breaks. – Nicholas Gati Aug 11 '22 at 20:43
  • Hm, I'm not sure if it should happen locally. But yeah, at the end of the day it's how Nginx/alike handles the initial request and if it prepends anything to the path before even reaching the app. You can't really do more on Nuxt's side AFAIK. – kissu Aug 11 '22 at 20:45
  • A middleware will not solve the issue and is not that great IMO for perf/SEO. Mind sharing the content of the 3 pages/middlewares associated + pages that do not have this issue? Dynamic routes maybe? – kissu Aug 11 '22 at 20:46
  • Yea, I read that it wasn't great for SEO as well. In fact one of the reasons I am on this task is to help with our SEO. In terms of the middleware associated to those pages I removed the middleware I mentioned above since it was only being used to see if that could be a potential solution. They aren't dynamic routes either, just some content fetched from our API to display on one of the pages. You can go to https://www.pietrastudio.com and see that navigating to the Pricing page does not have the slash until it's refreshed. As for the Marketplace page, we open a new tab and it adds a slash. – Nicholas Gati Aug 11 '22 at 20:52
  • Looking the result will not help us find what is the cause. Also, as I've already answered in previous questions: having both a slash and a non-slash is not a big issue SEO wise overall. Doing several redirections is not a good practice but having `pricing` and `pricing/` is okay so far, not a big thing to worry about IMO. – kissu Aug 11 '22 at 20:55
  • The page is pretty simple without any middleware. ` ` – Nicholas Gati Aug 11 '22 at 21:05

0 Answers0