让人困惑的“history 前端路由”

[angsheng]

我看到“前端技术”里边有这么个“通过 window.history 实现“前端路由”，据说非常神奇、高端，不用在地址栏加#号了，简直是常人说不能及，会用了香车美女登顶人生巅峰，

据说这种高级技术要用到“history.pushState 以及 window.onpopstate”。

那么我就来看下它是怎么实现的吧？

首先是 MDN 上的文档：

“HTML5 引入了 history.pushState() 和 history.replaceState() 方法，它们分别可以添加和修改历史记录条目。这些方法通常与 window.onpopstate 配合使用”

然后举例子细叙参数类型，总体来说就是这个玩意更改浏览器的历史记录，那个好像思路就有了，根据历史记录被更改了的事件，为事件注册处理程序来达到更改视图的目的，是不是？？

紧接着我就去看 popstate：

“每当处于激活状态的历史记录条目发生变化时,popstate 事件就会在对应 window 对象上触发. 如果当前处于激活状态的历史记录条目是由 history.pushState()方法创建,或者由 history.replaceState()方法修改过的, 则 popstate 事件对象的 state 属性包含了这个历史记录条目的 state 对象的一个拷贝.

调用 history.pushState()或者 history.replaceState()不会触发 popstate 事件. popstate 事件只会在浏览器某些行为下触发, 比如点击后退、前进按钮(或者在 JavaScript 中调用 history.back()、history.forward()、history.go()方法).”

看到这我就头大了，这到底是触发事件还是不触发事件？？

然后我就百度别人写的东西吧，上刑一般看了 CSDN 那些粘贴复制博文，

连篇累牍、

汗牛充栋、

浩如云海，

看了半天还是一头雾水！

本想着这么一个小问题，花五分钟了解下，结果可好弄了一个多小时还没弄明白，直到我耐下性子细发现了这么一篇例子：

https://blog.csdn.net/qq_33332184/article/details/90161368

其中： $('a').on('click',function(){ console.log(this.text) var text = this.text; $('#router').html('

'+ text +'

') history.pushState(null,null,'#/'+text); })

简直让我惊呼！!

原来所谓的通过 history 实现“前端路由”就是这么个意思：通过 history.pushstate 更改一下地址栏的字符串！！（至于视图处理的触发是仍然是通过其他的事件（这段代码里是 click ））

没错，就是这么简单！ 惊喜不惊喜？意外不意外？

那现在看来 MDN 也没跟你说假话，人家只是说“配合使用”，也没讲什么“前端路由”。

我只能是感叹前端的技术实在是夫俗子不能驾驭哦！

[RyougiShiki]

同样感觉+1，刚开始没懂，history 以为跟历史记录前进后退函数有关。直到看到 vue-router 文档中关于 history 模式配置，apache、nginx、rewrite 这些关键字。
为了 url 里少写一个# 真是煞费苦心，前端有时候太细了。

[angsheng]

@RyougiShiki 你用“细”这个词总结。我其实是很想吐槽的，@#￥#！又怕做前端的朋友打我，哈哈哈