javascript - Problem with vue router, history mode not working on second layer - Stack Overflow

admin管理员组

文章数量:1415684

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',
            ponent: Index,
            meta: {
                requireAuth: true
            }
        },
        {
            path: '/admin/contact',
            name: 'contact',
            ponent: 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?

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',
            ponent: Index,
            meta: {
                requireAuth: true
            }
        },
        {
            path: '/admin/contact',
            name: 'contact',
            ponent: 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?

• javascript
• vue.js
• vuejs2
• vue-router

Share Improve this question Follow asked May 19, 2019 at 19:43 Arshia MoghaddamArshia Moghaddam 53888 silver badges2626 bronze badges 1

• So the problem is not about vue-router but it's about how do you serve your app, with nginx? the answer will be depend on it. – User 28 Commented May 20, 2019 at 4:33

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

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

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/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: '*',
  ponent: function(resolve) {
    require(['path/to/NotFoundComponent.vue'], resolve);
  }
}

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

本文标签： javascriptProblem with vue routerhistory mode not working on second layerStack Overflow