Vue直接URL不起作用，只能点击router-link

Question

这可能是我完全不知道的一个已知的 Vue 路由。

所以我有一个使用 url /hardware 的 .vue 文件。这是路由

{
    path: "/hardware",
    name: "Hardware",
    component: () =>
      import(/* webpackChunkName: "hardware" */ "../views/Hardware.vue")
  },

使用外部站点上的链接直接访问 /hardware 或在地址栏中键入它不起作用，导致我找不到页面。但点击我的导航栏中的这个链接确实有效。

<router-link to="/hardware">Hardware</router-link>

我是否遗漏了一些在学习路由时遗漏的非常明显的东西？这是因为它是单页应用程序吗？预先感谢您的任何帮助。

添加我确实打开了历史模式，想知道这是否是问题所在？

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

Answer 1

从评论返回（Netlify）Vue-router 在本地工作，而不是像 Apache/Nginx/Firebase 托管那样在托管/部署端工作：

1) SPA 中的 Pretty-URL / Hashbang 困境。 当您的 Vue 项目启用模式时，服务器需要重定向history。在 apache 中，只需要通过类似的方式完成一些重定向规则.htaccess，因此大多数托管服务都包含 Netlify（您需要在 Netlify 那里检查路由重定向规则）。由于找不到服务器页面，告诉我们您的路线在其指定的路径下没有实际文件/route。

上一篇：Vue Router 重新访问 url 时返回 404

2) 如果您的项目采用多页面模式而不是 hashbang SPA，您的 Vue 项目需要进一步配置：通过SSR或在部署前预渲染静态文件