Question

我有一个使用vue路由器的vuejs项目我为网站制作了一个仪表板，我想为其添加第二个路由器

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;

问题是，当我尝试在浏览器中手动打开“ / admin / contacts”或刷新页面时，联系人未加载并且出现404错误

但是，当我单击链接到该地址的路由器链接标签时，它会按预期工作

我该如何解决？

Answer 1

如果您在开发环境中并使用webpack-dev-server运行应用，则需要在Webpack配置文件的devServer属性上添加historyApiFallback: true

Answer 2

如果您在屏幕上和控制台中都看不到任何内容，则服务器配置（https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations）必须存在一些问题。

要调试，您可以使用一条路由来捕获所有路径。将以下路线添加到您的路线中，

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

任何URL都会加载此组件。现在，您可以确定发生了哪些错误。

vue路由器问题，历史记录模式不适用于第二层

2 个答案: