javascript - 如何在 Angular 中将非哈希 URL 重定向到具有哈希的 URL？

Question

所以用户收到一个 URL，它看起来像 http://myapp.com/foo .

因为我的 Angular 的应用程序路由是“使用哈希”工作的，所以适当的组件在 http://myapp.com/#/foo 下可用。 .

因为我有这样一条路线:

{ path: '',   redirectTo: '/mainpage', pathMatch: 'full' }

http://myapp.com/foo由它处理并重定向到 http://myapp.com/#/mainpage

我想要实现的是从 http://myapp.com/foo 做一个重定向至 http://myapp.com/#/foo .当然，我希望保持重定向到/#/mainpage，就像现在一样。

我如何在 Angular 7 中做到这一点？如果只有 redirectTo param 可以将函数作为值而不是字符串，让我自己处理那里的重定向，那将是一些东西。但恐怕这是不可能的。

//更新

我想到的是使用 InitialRedirectGuard和一个空的子数组而不是 redirectTo对于 path: ''对象。

    path: '',
    children: [],
    canActivate: [InitialRedirectGuard],
    pathMatch: 'full',

重定向的逻辑位于 InitialRedirectGuard 中，我在其中使用 window.location.pathname 来查看我来自的 URL。然后 router.navigate 发生了。我猜不是很酷，但似乎有效。

Answer 1

只需将下面的脚本添加到您的index.html。它所做的是检查您的 URL 中是否有/#/，如果没有找到，它会重定向到等效的/#/路由。

因此访问 http://myapp.com/foo 将重定向到 http://myapp.com/#/foo

<script>
  // auto redirect to hash# URL
  if (!window.location.href.match(/\/#/)) {
    window.location.href = window.location.origin + '/#' + window.location.pathname + window.location.search;
  }
</script>