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

Posted 2023-02-22

【中文标题】Vue直接URL不起作用，只有router-link点击

【英文标题】：Vue direct URL is not working, only router-link click

【发布时间】：2020-09-28 19:49:19

【问题描述】：

这可能是我完全错过的一个已知的 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
);

【问题讨论】：

您是否为您的路由器配置添加了mode:'history' /hardware 而不是路由到#/hardware ？

我确实开启了历史模式，这会是问题吗？

关闭历史模式修复它，只需将 URL 变成 /#/Hardware 就可以了。

好吧，我看到你编辑的const router。所以问题可能出在您的base 选项上。我的 vue-router gh-page 上没有 / 或不在我的参数后面的问题。尝试删除基本选项

这实际上在本地有效但在Netlify上无效，那么此时一定是服务器配置问题？

【参考方案1】：

这可能是您的浏览器添加了一个尾部斜杠来为您提供与您的路线不匹配的“/hardware/”。过去，我创建了一个别名来匹配两个路由，例如“/hardware”和“/hardware/”。

【讨论】：

我已经证实这没有发生。创建额外的路线也不起作用。

【参考方案2】：

从 cmets 回复 (Netlify) Vue-router 在本地工作，而不是像 Apache/nginx/Firebase 那样在托管/部署端工作：

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

上一个帖子：Vue Router return 404 when revisit to the url

2) 如果您的项目用于 Multi-page-mode 而不是使用 hashbang SPA，您的 Vue 项目需要进一步配置：通过 s-s-r 或 pre-rendering 之前的静态文件部署

【参考方案3】：

我现在面临同样的问题，并决定与社区分享我的想法。

您只需从Router 中删除mode: "history" 即可轻松解决该错误。然后它将自动替换为 URL 中的井号 (#)。即使您在浏览器中使用直接链接，它也会起作用。

但是，基于最新的 SEO 建议，历史模式更可取，因为没有 # 的 URL 更容易被 Google 跟踪。

如果您想保存历史模式，您需要在您的服务器上启用历史模式。我使用 Express 中间件，接下来是我的解决方案：

const express = require('express');
const history = require('connect-history-api-fallback');
const app = express();

app.use(history());
app.use(express.static('src'));

app.get('/', (req, res) => 
  res.sendFile('src/index.html');
);

app.listen(3000, () => console.log('server started'));