javascript - 带有 vue-router 的中间人在页面重新加载时加载“未找到页面”

Question

我正在构建一个网站，该网站在后端使用 Middleman (Ruby)，在前端使用 VueJS，以及 vue-router 来处理路由。在我的 vue-router 索引中，我正在 /chapter/:id 上加载 Video 组件，如您在此处看到的：

const routes = [
  {
    name: 'chapter',
    path: '/chapter/:id',
    component: Video,
    props: true
  },
]

当您单击 a <router-link>- 时，一切都按预期工作，但是当您重新加载页面（例如：/chapter/2）时，它会从 Middleman 加载“未找到文件”。

Middleman 中有什么东西可以禁用路由吗？

任何帮助将不胜感激！谢谢

Answer 1

将您的后端配置为index.html在请求的地址为 时返回chapter/:id，或者当它不是后端 api 列表中的地址时返回。

当我们使用 vue 构建的单页应用程序时，我们总是在index.html，它一直在app.js运行一个或一些东西，当路由发生变化时，脚本会检测到并更改页面内容，但我们从未离开过index.html。因此，当我们重新加载页面时，浏览器从服务器请求一个文档/html，当 html 到达其中并带有 js 脚本时，脚本运行，根据地址/路由确定要显示的内容，然后我们就可以开始了美好的。

所以在你的情况下，只需要修复“确保浏览器在访问时获取 html 文件/chapter/:id”部分。