Larasou
1 month ago
36
2
Vue

VueRouter - Redirection to page 404 after a refresh of the page

Posted 1 month ago by Larasou

Hello,

I have not used VueRouter for a long time.

Today I wanted to create a new application in SPA.

When I go on a page with <router-link>, the page is very good, but when I refresh this page, I get a 404 error.

I have never had that kind of problem before.

Someone would have a solution please?

/* app.js */



import Vue from 'vue';
import VueRouter from 'vue-router';
import VueHead from 'vue-head'
import routes from './routes';
import vuetify from './plugins/vuetify';

Vue.use(VueHead);
Vue.use(VueRouter);

require('./bootstrap');

/* Authentification */
Vue.component('login', require('./components/Auth/Login.vue').default);
Vue.component('register', require('./components/Auth/Register.vue').default);

const app = new Vue({
    el: '#app',
   
    router: new VueRouter(routes),
    vuetify,
});

/* routes.js */


export default {
    mode: 'history',

    linkActiveClass: 'font-bold',

    routes: [
        {
            path: '/',
            name: 'home',
            component: () => import('./components/Home'),
        },
        {
            path: 'animes',
            name: 'animes',
            component: () => import('./components/Animes/Animes'),
        },
        {
            path: 'animes-en-cours',
            name: 'animesInProgress',
            component: () => import('./components/Animes/InProgress'),
        },
        {
            path: 'animes-termines',
            name: 'animesCompleted',
            component: () => import('./components/Animes/Completed'),
        },
        {
            path: 'ma-catalogue',
            name: 'myCatalog',
            component: () => import('./components/Animes/MyCatalog'),
        },
        {
            path: 'ma-preferes',
            name: 'myFavorite',
            component: () => import('./components/Animes/MyFavorite'),
        },
        {
            path: 'top-des-classements',
            name: 'topRanking',
            component: () => import('./components/Animes/TopRanking'),
        },

        {
            path: "*",
            component: require('./views/Errors/NotFound').default,
        },
    ],
    scrollBehavior() {
        return {x: 0, y: 0}
    }
};


Please sign in or create an account to participate in this conversation.