UPDATED - Please see below
I have a VueJS MPA with a Netlify Form on the Contact Page.
The form works as expected when I hit send I get the success message and I receive the email notification with the form data etc.
However, when I click ‘back to our site ->’. It returns a ‘Page Not Found’ error, and in the Network tab of DevTools it shows as receiving a 404:
Refreshing pages causes the same issue.
I also can’t navigate to any page of the site directly by entering the URL - i.e. ‘www.williamsonwalkies.co.uk/contact’ - but clicking through on the links in my app work fine.
I’ve read through a couple threads on here already but couldn’t find anything that applied to my issue.
Not sure if this is maybe to do with the Vue app itself - any ideas would be great.
If you need any more info or source code, let me know!
UPDATE:
I changed the mode of the vue-router from History to Hash and it fixed it. This is because when refreshing the page or going to it’s exact URL results in a request to the server which breaks it because vue-router uses client-side routing rather than server-side. However, it means every URL has the # in it which I’d rather it didn’t.
I think a better solution would use History mode and then implement redirects of some kind but I am not sure if this should be in the router’s config or Netlify’s - any ideas?