时间戳

首页 > 解决方案 > 如何使用 Vue Router 处理域和主题标签之间的 url 数据？

node.js - 如何使用 Vue Router 处理域和主题标签之间的 url 数据？

问题描述

我正在使用 vue-cli、vue 路由器和 node.js 开发一个项目。Vue 路由器处于哈希模式，因为我希望用户能够复制和粘贴 url 或从内存中键入并最终到达他们期望的位置，而不是看到无法获取页面。我遇到的问题是，如果我使用“npm run dev”然后导航到“localhost:8080/foo”，它会自动更改为“localhost:8080/foo/#/”并显示主页但是，如果我在 server.js 文件中使用 node 和 express 来提供在“npm run build”之后生成的 dist 文件夹，同样的事情会导致无法 GET。

有什么方法可以检查请求中的 url，如果它不包含哈希，只需添加它并像用户输入它一样继续？这样，“localhost:8080/foo”将更改为“localhost:8080/#/foo”，然后进入预期页面，而“localhost:8080/#/foo”不会更改。

现在是时候在这里提出问题了，我确定我没有提供足够的信息；如果需要更多细节来回答这个问题，我很乐意提供。谢谢您的帮助！

标签： node.jsexpressvue.jsroutingvue-router

解决方案

我最终通过将其添加到我的 server.js 文件中找到了解决方案：

if (req.url !== '/' && !req.url.includes('static'))
    res.redirect(`/#${req.url}`);

我想在某些情况下这不起作用，但到目前为止它看起来不错。如果用户尝试访问 domain.com/foo，这会将他们重定向到 domain.com/#/foo 并显示正确的页面。如果用户输入 domain.com/#/anything/at/all 所有 server.js 看到的是 '/' 并且 vue 路由器会处理它。感谢大家的帮助！

推荐阅读