如何修复 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 分享内容的相关部分：

Here comes a problem, though: Since our app is a single page client side app, without a proper server configuration, the users will get a 404 error if they access http://oursite.com/user/id directly in their browser. Now that's ugly.

Not to worry: To fix the issue, all you need to do is add a simple catch-all fallback route to your server. If the URL doesn't match any static assets, it should serve the same index.html page that your app lives in. Beautiful, again!

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

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

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

并在您的 "routes":

关闭 ], 后添加

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

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

How can I fix vue router direct links?

vue.js

vue-router