router总结开始之前，一波安利，建议先把这篇文章前端路由以及vue路由的hash模式与history模式看完。最后

哈哈，啰里吧嗦的干货的搬运工又来了,

开始之前，一波安利，建议先把这篇文章前端路由以及vue路由的hash模式与history模式看完。

hash方式：

1.1原理》hash方式利用的是window里的onhashChange事件

浏览器地址栏中#后面的东西不会被发送请求到服务端，自然不会刷新页面，同时地址栏中url也改变了，还会触发onhashChange事件。vue router就是通过监听onhashChange事件，然后再利用window.location这个接口，再去导航到其他的页面。当然这里的导航仅仅是前端的，实际上并不会向后端发送请求以及刷新页面。在vue-router的实现中，是利用了window.location.hash = path（path就你要去的地址啦，这个地方可以参考上面的深入Vue-Router的最佳实践里面其中对Vue-Router源码的解读）。

window.onhashchange = function (event) {
  console.log("event.oldURL", event.oldURL);
  console.log("event.newURL", event.newURL);
  let hash = location.hash.slice(1);
  document.body.style.color = hash;
};

上面是一个简单的例子。使用parcel去运行，得到：

手动在地址栏中添加#green：

输入完之后，回车。这时页面中的文字颜色就会改变：

如果不加#的话，回车：

hash方式除了看起来不美观，别的没啥大问题。

history方式：

2.1原理》history方式利用的是h5里的pushState接口

pushState的原理实现是当我们使用pushState接口去操作url的时候，也不会向服务器发送请求。但是这种方式有一个的缺点：当刷新页面的时候，会向服务器发送请求，如果后端没有相应的配置，就会报错。

具体参考传送门Manipulating the browser history。和pushState出现的还有一个叫popState接口，window.popstate传送门。另外需要注意的是:调用history.pushState()或者history.replaceState()不会触发popstate事件.popstate事件只会在浏览器某些行为下触发,比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法)。

实例一：对state的学习，如下图，打开之后，history中state是null：

随后手动在地址栏中输入#red，触发onhashChange事件，文字颜色发生变化,state依旧为null：

点击后退，这时state：

实例二：pushState的学习

使用pushState的时候，报错：

            history.pushState({ color: "red" }, "red", "/red");

1.1：直接右键使用浏览器打开html文件

上面的错误是由于预览文件的方式有误，不要用文件协议去浏览。parcel之后，运行即可

在edge浏览器中，无论哪种方式都可以。

1.2：后面看有答案建议改为：

 history.pushState(
   null,//{ color: "red" },
   null,//"red",
   window.location.pathname + "/red"
 );

无论使用文件协议还是http协议，在谷歌浏览器和火狐中都报错。在Edge浏览器中，文件协议可以成功。

总结：使用http协议打开就ok了。

两种方式区别

参考这篇文章vue-router的两种模式的区别。其实区别在MDN里写的很清楚：传送门MDN_HISTORY

pushState() 设置的新 URL 可以是与当前 URL 同源的任意 URL；而 hash 只可修改 # 后面的部分，因此只能设置与当前 URL 同文档的 URL；

pushState() 设置的新 URL 可以与当前 URL 一模一样，这样也会把记录添加到栈中；而 hash 设置的新值必须与原来不一样才会触发动作将记录添加到栈中；

pushState() 通过 stateObject 参数可以添加任意类型的数据到记录中；而 hash 只可添加短字符串；

pushState() 可额外设置 title 属性供后续使用。

碎碎念：很多知识都只是会用，深入了解到它的内部原理之后，才明白，哦，原来是酱紫的啊。自己的理解和表达还欠缺，因为知道的不多，思维很狭隘，片面。活到老，学到老，不仅仅指的是专业知识和技能，所有的事情都是这样的。fighting啦，努力，坚持，希望，等待。