..
Web的History API
我的疑问
我之前一直很好奇，为什么 vue-router 定义的路由，我直接在控制台调用 window.history.pushState 无法跳转过去？即 URL path 是改变了，但是没有触发注册到 vue-router 上的页面渲染。
这个疑问迫使我想了解了解 Web 的 History API
History API
Web History API 似乎就是为 Web 单页应用设计的。主要 API 都不会刷新页面。
第一部分：js控制浏览器的“前进”、“后退”：
- window.history.back()
- window.history.forward()
- window.history.go()
第二部分：js修改浏览记录
- window.history.pushState，新增一条history记录
- window.history.replaceState，修改当前记录（有些浏览器出于安全考虑，依然会新增一条history记录）
另外，还有一个 window 的 popstate 事件。用来监听前进、后退导致的 window history 的变化。而开发者调用 window.history.pushState 往 history 塞记录是不会触发的，即便这时候 URL Path 已经变得天翻地覆了，也不会触发这个事件。
回答我的疑问
现在算是明白这些路由组件是如何做到的了，方式如下：
- window.onpopstate监听“前进”、“后退”的路由变化。
- 自己封装函数，当调用pushState的时候，也调用一下路由变化的监听函数就好了。就这么简单！
当然，这样的限制就是其他人自己调用 pushState，路由组件就监听不到。这个暂时没有什么好方法~