I hosted my website on gh-pages and deployed it, but have some issues with my routing.

Navigating through the pages through the navigation menus at the top works fine: navigation menu

but if I refresh the page, the page throws a 404 error although the URL remains the same (i.e https://[username].github.io/[repo-name]/about). Alternatively, if I type that URL, I also get a 404 error. This doesn't happen on my home page (https://[username].github.io/[repo-name]/), only all the other pages.

Here is my code for routing:

import { createRouter, createWebHistory } from 'vue-router';
import Portfolio from './views/portfolio.vue';
import About from './views/about.vue';
import Doodleboard from './views/doodleboard.vue';

const routes = [
    {
        path: '/',
        name: 'portfolio',
        component: Portfolio,
        meta: {title: 'arissa\'s portfolio'}
    },
    {
        path: '/about',
        name: 'about',
        component: About,
        meta: {title: 'about'}
    },
    {
        path: '/doodleboard',
        name: 'doodleboard',
        component: Doodleboard,
        meta: {title: 'doodleboard'}
    }
]

const router = createRouter({
    history: createWebHistory(process.env.BASE_URL),
    routes,
  })
  

router.beforeEach((to, from, next) => {
    document.title = to.meta.title;
    next();
});

export default router;

In my Navigation.vue file, this is a line from the navigation menu:

<router-link :to="{name: 'portfolio'}">portfolio</router-link>
<router-link :to="{name: 'about'}">about</router-link>
<router-link :to="{name: 'doodleboard'}">doodle board</router-link>

If I run this on local host, I am able to refresh the pages and there will be no error. This error only shows up when deployed to gh-pages

CodePudding user response：

Github pages does not support SPA.

Use hash mode instead of web history.

What happens is that if you refresh/load a URL for the first time, for example /blog/my-first-post, github does not know how to handle that.

It works in the pattern of https://<Username>.github.io/<Repo>.

CodePudding user response：

You should use Netlify for SPA.