Vue router with hash mode doesn't work on Github Pages

Question

Can't navigate a specific page by url

Hello everyone, I have a little problem, I had a "boilerplate" project with Vue3 + Laravel. And I wanted to use link so people can navigate specific page, for example here's a link you can navigate

https://klim2020.github.io/

After that you are able to open portfolio page by clicking on Portfolio link at the right top of the page. As you see you have that

/cv/en 

adress at the address bar

But if you will try to navigate this link from other source you will get Error

Cannot GET /cv/en

try to navigate from here https://klim2020.github.io/cv/en

Why is this happening can you tell me please?

Answer 1

First off, I do recommend hosting on Netlify or Vercel, those will fix the issue that you do have here. GH pages are just not worth it. And the other 2 services are more flexible, as free and quite powerful.

The issue here being that if you go to a specific path with a "hard navigation", not a client-side one (via vue-router), you SPA will not be in that specific endpoint. Hence why, you will get a 404 (your initial entry point is available a /).

You also need to use the history mode rather than the current # that you do have in your path.

Best thing? The part explaining how to solve your current issue with Netlify/Vercel is also explained in a section below (mainly providing a redirects/rewrites configuration).