vue的hash和history模式

• 路由模块的本质就是建立起url和页面之间的映射关系。
• hash和history改变URL的同时不会重新加载页面和发送请求。

背景知识

• 早期的前端路由通过location.hash实现，其可以获取到url中#号及其后面的参数 hash路由模式的实现基于以下几个特性
• URL中的hash值只是客户端的一种状态，也就是说当向服务器发送请求时，hash部分不会被发送
• hash值的改变都会在浏览器的访问历史中增加一个记录，因此我们可以通过浏览器的前进、回退按钮控制hash的切换
• 可以通过a标签中的href属性或者js对location.hash进行赋值，来改变URL中的hash值
• 可以用hashchange事件监听hash值的变化，从而对页面进行跳转并渲染

hash

• url中有#
• 原理是onhashchange事件
• 仅 hash 符号之前的内容会被包含在请求中
• hash修改的url是同文档的url
• hash不会修改浏览器历史记录栈
• 生成二维码、微信分享页面的时候都会自动过滤掉#后面的参数 window.onhashchange = function(event){ console.log(event.oldURL, event.newURL); }

history

• url中没有#，美观
• 原理是popstate事件,浏览历史（即history对象）出现变化时，就会触发popstate事件。history.pushState用于在浏览历史中添加历史记录，history.replaceState修改浏览历史中当前纪录，但是并不触发页面刷新
• 全路径内容会被包含在请求中
• history修改的url可以是同域的任意url
• history会修改浏览器历史记录栈
• 刷新出现404