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

Question

我正在使用vue-cli，vue路由器和node.js进行项目。 Vue路由器处于哈希模式，因为我希望用户能够复制和粘贴URL或从内存中键入内容并最终到达他们期望的位置，而不是看到Cannot GET页面。我遇到的问题是，如果我使用过“ npm run dev”，然后导航到“ localhost：8080 / foo”，它将自动更改为“ localhost：8080 / foo /＃/”并显示主页但是，如果我使用node并在server.js文件中进行表达来服务“ npm run build”之后生成的dist文件夹，则同样的事情会导致Cannot GET。

是否可以通过某种方式检查请求中的url，并且如果其中不包含哈希，则只需添加它并像用户输入了它一样继续操作即可？这样，“ localhost：8080 / foo”将被更改为“ localhost：8080 /＃/ foo”，然后在不更改“ localhost：8080 /＃/ foo”的情况下转到预期的页面。

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

Answer 1

散列路由机制主要用于客户端路由，与服务器无关（排除301重定向）。

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

我还没有测试过，但是也许您可以使用某种Navigation Guard，并进行一些检查，或者可以通过以下方式检查页面访问时的某些用户状态：

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

Answer 2

由于只有在用户自己导航到url时您才会遇到此问题，因此可以在主要组件中使用created生命周期挂钩，然后查看window.location。如果window.location.pathname不为空或单个斜杠，则表示它们已导航到自定义URL。然后，您可以将用户客户端重定向到正确的URL。令人高兴的是，您不必担心在服务器端重定向哪个url，尤其是如果您在服务器上运行的URL超过了Vue前端时，因为重定向仅在加载Vue应用程序时发生。

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

Answer 3

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

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

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