Problem with vue router, history mode not working on second layer

Question

I have a vuejs project that uses vue router i made a dashboard for my website and i wanted to add a second router to project for it

import Vue from 'vue'
import Router from 'vue-router'
import Index from "@/views/Admin/Index.vue";
import ContactIndex from "@/views/Admin/Contact/Index.vue";

Vue.use(Router)

const router = new Router({
    mode: "history",
    routes: [{
            path: '/admin',
            name: 'admin',
            component: Index,
            meta: {
                requireAuth: true
            }
        },
        {
            path: '/admin/contact',
            name: 'contact',
            component: ContactIndex,
            meta: {
                requireAuth: true
            }
        }
    ]
})
export default router;

the issue is when i tried to open let's say "/admin/contacts" in my browser manually or refreshed the page, contact didn't load up and i got 404 error

BUT, when i click on the router-link tag that is linked to that address it works as intended

How can i fix it?

Answer 1

If you on development environment and use webpack-dev-server to run your app, you need add historyApiFallback: true on devServer prop of your webpack config file

Answer 2

If you're not seeing anything on the screen and in the console, You must have some issues with your server configuration (https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations).

To debug, you can have a route to catch all paths. Add the below route into your routes,

{
  path: '*',
  component: function(resolve) {
    require(['path/to/NotFoundComponent.vue'], resolve);
  }
}

Any URL will load this component. Now you can identify what mistakes have been done.