如何使用 Vue Router 处理域和主题标签之间的 url 数据？答案

【问题标题】：How do I handle url data between domain and hashtag with Vue Router?如何使用 Vue Router 处理域和主题标签之间的 url 数据？
【发布时间】：2019-03-11 15:53:37
【问题描述】：

我正在使用 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.js express vue.js routing vue-router

【解决方案1】：

由于只有在用户自己导航到 url 时才会出现此问题，因此您可以在主组件中使用 created 生命周期挂钩并查看 window.location。如果window.location.pathname 不是空的或单斜杠，您就知道他们导航到了自定义网址。然后，您可以将用户客户端重定向到正确的 url。好的部分是您无需担心在服务器端重定向哪些 url，特别是如果您在服务器上运行的不仅仅是 Vue 前端，因为重定向仅在加载 Vue 应用程序时发生。

// App.vue
created () {
  const pathname = window.location.pathname;
  if (['', '/'].indexOf(pathname) === -1) {
    window.location = `/#${pathname}`
  }
}

【讨论】：

【解决方案2】：

hash-routing机制主要针对客户端路由，应该与服务端无关（排除301重定向）。

当您请求“localhost:8080/foo”时，服务器正在侦听“/foo” URI，而哈希之后的任何内容，例如"/foo#main", "main" 这里将被忽略。 #main 仅在客户端用于呈现不同的浏览器输出。

我还没有测试过，但也许你可以使用某种Navigation Guard，并做一些检查，或者用其他方式检查页面访问时的某些用户状态，如下所示：

if (user === null) {
    window.location.href = '' // Default link
} else {
  return;
}

【讨论】：

【解决方案3】：

我最终通过将其添加到我的 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 路由器会处理它。感谢大家的帮助！

【讨论】：