Question

这可能是我完全不知道的Vue路由问题。

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

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

直接使用外部站点上的链接进入/ hardware或在地址栏中输入链接均无效，这使我无法找到Page。但是，在我的导航栏中单击此链接确实可以。

<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 Hosting等托管/部署方面，

1） SPA中的俏丽网址/ Hashbang困境。 当您的Vue项目启用history模式时，服务器需要重定向。在apache中，只需类似地只需通过.htaccess来完成一些重定向规则，因此大多数托管服务都包括Netlify（您需要在Netlify处检查路由重定向规则）。未找到服务器页面，告诉我们您的路由在其指定的/route下没有实际文件。

上一个线程：Vue Router return 404 when revisit to the url

2）如果您的项目为多页模式，而不是使用hashbang SPA，则需要对您的Vue项目进行进一步的配置：通过SSR或{{3} }部署前的静态文件

Answer 2

可能是您的浏览器在给您的“ / hardware /”添加了斜线后跟您的路由不匹配。过去，我创建了一个别名来匹配“ / hardware”和“ / hardware /”等路由。

Vue直接URL不起作用，仅单击路由器链接

2 个答案: