CODEWITHSUNDEEP
vue.jshttp-status-code-404vue-routergithub-pagesdeep-linking
jackdomleo7
jackdomleo7

Reputation: 388

How can I deep link into a Vue.js project on GitHub Pages?

I have a practise repository in GitHub (see https://jdomleo.github.io/vue-deploy-practise).

Navigate to "About" in the navigational list at the top:

enter image description here

You will see in the URL, it has appened /about, as expected. However, if I give people the URL https://jdomleo.github.io/vue-deploy-practise/about, they get a 404 error from GitHub Pages.

My question is, how can I configure my Vue.js project to allow deep linking?

See link to GitHub repository https://github.com/JDomleo/vue-deploy-practise.

Upvotes: 1

Views: 2502

Answers (1)

alfandango
alfandango

Reputation: 111

You have to add a custom 404.html page to your github pages that reroutes the request using javascript.

The first problem though is that you have enabled HTML5 History Mode, that requires a server to be set up to handle that and I don't think github pages allows for it.

Once you fixed that you have a couple of options.

Here is one example on how the 404 page uses the local storage to reroute the app. https://medium.com/swlh/how-to-host-your-angular-reactjs-vuejs-spa-on-github-pages-2d9ab102ac7b

Another is simple to change the url to a fragment instead of path, similar to the method used in this library https://github.com/rafrex/spa-github-pages. This library maight even just work for you.

Upvotes: 2

Related Questions