如何修复 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 将无法处理使用 /training URI 的用户进入培训页面，并且每次都需要从主页导航到那里。

您可能需要执行此用户所做的操作：https://stackoverflow.com/a/67168081/7176046

并在您关闭], 后为您的"routes" 添加此内容：

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