如何修复vue路由器直连？

Question

我有一个托管在 Azure 上的 vuejs SPA，在从主页启动时可以在生产环境中正常运行。但是，我无法直接访问链接，甚至无法刷新页面。他们直接将我带到 404 错误页面。

我知道这与我的路由器有关，但弄乱它后我不知所措。是否有一些需要快速改变的事情，或者还有更多的事情需要改变？下面是我的路由器索引。

我以为底部的“历史”模式可以解决这个问题，但事实并非如此。

import Vue from 'vue'
import VueRouter from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/resources',
    name: 'Resources',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "resources" */ '../views/Resources.vue')
  },
  {
    path: '/FAQs',
    name: 'FAQs',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "faqs" */ '../views/FAQs.vue')
  },
  {
    path: '/training',
    name: 'Training',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "training" */ '../views/Training.vue')
  }
]

const router = new VueRouter({
  mode: 'history',
  base: process.env.BASE_URL,
  routes
})

export default router

Answer 1

这是 Michal 分享的相关部分：

然而，这里出现了一个问题：由于我们的应用程序是单页客户端应用程序，如果没有正确的服务器配置，如果用户直接在浏览器中访问http://oursite.com/user/id ，他们将收到 404 错误。现在那太丑了。

不用担心：要解决这个问题，您所需要做的就是向您的服务器添加一个简单的包罗万象的后备路由。如果 URL 与任何静态资源都不匹配，它应该提供与您的应用程序所在的相同的 index.html 页面。再次美丽！

来源：https://router.vuejs.org/guide/essentials/history-mode.html#example-server-configurations

所有这一切都表明，Vue Router 将无法处理使用/trainingURI 访问训练页面的用户，并且每次都需要从主页导航到那里。

您可能需要执行此用户所做的操作：/sf/answers/4701765701/

并在结束后添加以下],内容"routes"：

"navigationFallback": {
  "rewrite": "/index.html",
  "exclude": ["/images/*.{png,jpg,gif}", "/css/*"]
}