javascript - VueJS 路由/导航问题

Question

使用 VueJS 时遇到问题(第一次使用)

• 我的页面模板 90% 位于文档根目录的 index.html 文件中
• 我有 3 个组件(每个组件都包含每个“页面”的主要内容主体)

我的路由器:

export default new Router({
  mode: 'history',
  hash: false,
  routes: [
    {
      path: '/',
      name: 'Home',
      component: Home
    },
    {
      path: '/gallery',
      name: 'Gallery',
      component: Gallery
    },
    {
      path: '/contact',
      name: 'Contact',
      component: Contact
    }
  ]
})

我无法获取<router-link :to="{ name: 'Gallery' }">Gallery</router-link>工作 - 我的网站不会将它们呈现为我的 index.html 中的 anchor 标记(我可能不明白如何/在哪里使用 Vue) - 所以我使用标准链接，例如<a class="nav-link" href="/gallery">Gallery</a>

问题:

虽然所有这些代码在我的本地计算机上运行良好，但在我将代码上传到的任何地方都不起作用(我希望它在 Netlify 上运行)。 Netlify 和其他网站会覆盖我删除哈希值的尝试，因此我的链接会链接到例如

https://examplesite.com/#/ => https://examplesite.com/gallery#/

Answer 1

hash 不是 Router 选项。尝试删除这个。要在 Netlify 上使用历史记录模式，您必须将 _redirects 文件添加到您的 public 目录中。将其添加到文件中:

/*/200这将确保所有路径都由 vue-router

处理