实现自定义实用程序而不是`window.location.assign`答案

【问题标题】：Implementing custom Utility instead of `window.location.assign`实现自定义实用程序而不是`window.location.assign`
【发布时间】：2019-04-03 07:21:55
【问题描述】：

我正在使用 AngularJS，并且在控制器中，我有一个函数，就像这样。

  ctrl.onClick = (id) => {
    window.location.assign(`#/services/${id}`);
  }

我想使用我们的自定义 locationUtils 之一。这是代码：

export const redirectTo = (route) => {
  const { location } = window;
  location.href = `${location.origin}${route}`;
};

我正在将它导入控制器并且路径正确。但是我写的重定向不起作用。

这是我的实现：

  ctrl.onBrokerClick = (id) => {
    redirectTo(`#/services/${id}`);
  }

我到底做错了什么？有人可以帮我吗？

【问题讨论】：

标签： javascript angularjs ecmascript-6 controller routing

【解决方案1】：

好的，在这里回答我自己的问题。当redirectTo() 被调用时，它提供了前缀homepage。在我的函数中，而不是这个：

ctrl.onBrokerClick = (id) => {
    redirectTo(`#/services/${id}`);
  }

我这样做是为了补充缺少的前缀：

ctrl.onBrokerClick = (id) => {
    redirectTo(`/homepage/#/services/${id}`);
  }

这是迄今为止不太优雅的解决方案，但现在它可以工作。我得看看@front_end_dev 说了什么。

【讨论】：

【解决方案2】：

您可以尝试history.pushState(null,null,'new_url_address') 加载新网址。

按照此文档了解历史 api - https://developer.mozilla.org/en-US/docs/Web/API/History_API

【讨论】：

是的，我可以用更多的解决方案来解决它，只用 JS。我需要用我们的 Util 来做。所以，在未来，我们将只有几个失败点，并且知道在哪里寻找。不过还是谢谢！！
你可以改变你的 redirectTo 实现。您现在可以从窗口中获取 history 对象并按照我提供解决方案的方式工作，而不是获取 location 并进行处理。
那行不通，只有在我有 history 对象的情况下。假设这是一个新会话。在您的实现中，我应该有一个 if 语句和两个函数，一个 redirectTo() 和一个 historyRedirect()。我弄错了吗？
history 对象属于 window 属性，因此它始终存在，并且您将状态推送到其中而不是从中弹出。关于状态是否不需要维护，您可以轻松地将historyRedirect 用于您拥有的所有用例。