javascript - Angular JS UI-Router 如何在不重新加载页面的情况下更改导航栏中的 url

Question

我正在学习 Angular JS ui-router我想知道如何ui-router是否能够在不重新加载整个页面的情况下更改导航栏中的网址？。

我尝试阅读this博客和一些stackoverflow问题，但找不到任何合适的解释。有人能解释一下吗？

提前致谢!

Answer 1

它基于一个简单的事实，即我们可以使用超链接(<a> 标签)跳转到文档中的某些部分并将焦点带到该部分。但如果你的href属性指向IDs如果您的页面中不存在这些内容，那么浏览器将不会执行任何操作，只会更改 URL 中的哈希部分。

在现代浏览器中，每次 URL 中的哈希部分都会发生变化，即 hashchange事件将被解雇。 ui-router 或任何路由器实际上可以监听此事件，获取哈希部分并使用配置相应地更新 View 部分。

只要您通过单击某个链接触发状态更改，这种方法就可以正常工作，但在某些情况下您可以使用 $state.go() 等方法更改状态。或$location.path() 。在这种情况下，我们需要求助于 HTML5 的 History API。有一个pushState方法允许我们更改地址栏中的 URL，而不会导致浏览器加载该资源。