如何修复vue路由器直接链接？

Question

我有一个vuejs SPA托管在Azure上，当开始在主页上时，它在生产上工作得很好。但是，我不能直接访问链接，甚至不能刷新页面。他们直接带我去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错误。这太丑了。

不要担心:要解决这个问题，您所需要做的就是添加一个简单的catch-所有回退路由到您的服务器。如果URL不匹配任何静态资产，它应该提供与应用程序所在的相同的index.html页面。又漂亮了！

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

这就是说，Vue路由器将无法处理使用/training URI访问培训页面的用户，每次都需要从主页导航到那里。

您可能需要做这个用户所做的事情：https://stackoverflow.com/a/67168081/7176046

并在关闭],后为"routes"添加以下内容

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