本篇文章主要介绍前端路由相关的文章。在稍微复杂一点的SPA，都需要路由，vue-router也是vue全家桶的标配之一。vue-router中有hash和H5 History两种路由模式，下面，我们逐个进行讲解。
一、网页中url组成部分
二、hash模式
1、hash变化会触发网页跳转，即浏览器的前进、后退。
2、hash变化不会刷新页面，SPA必需的特点
3、hash永远不会提交到server端（自生自灭）
在浏览器端，我们可以通过调用window.onhashchange方法来监听页面hash的变化。下面的操作，都不会导致页面hash值发生改变，从而触发window.onhashchange方法的执行。
a. js修改url
b. 手动修改 url 的hash
c. 浏览器前进、后退
具体请看下面代码
1、监听hash改变
// hash 变化 包括
// a. js修改url
// b. 手动修改 url 的hash
// c. 浏览器前进、后退
window.onhashchange = (event) => {
console.log('old url', event.oldURL)
console.log('new url', event.newURL)
console.log('hash',location.hash)
}
2、页面初次加载，获取hash
// 页面初次加载，获取hash
document.addEventListener('DOMContentLoaded', () => {
console.log('hash:', location.hash)
})
3、js修改hash
document.getElementById('btn1').addEventListener('click', function(){
location.href="#/user"
})
4、手动修改hash
此处不做演示。
三、H5 history模式
1、用url规范的路由，但是跳转时不刷新页面。
2、history.pushState
3、history.onpopstate
正常页面浏览是需要刷新页面的，改造成H5 history模式后，在首次加载后，就不需要刷新页面了。如下所示：
1、
history.pushState和history.repalceState的使用
pushState说明
pushState方法接受三个参数，依次为：state：一个与指定网址相关的状态对象，popstate事件触发时，该对象会传入回调函数。如果不需要这个对象，此处可以填null。title：新页面的标题，但是所有浏览器目前都忽略这个值，因此这里可以填null。url：新的网址，必须与当前页面处在同一个域。浏览器的地址栏将显示这个网址。
最常用的方法：window.history.pushState(null,null,'download?id=1');完整使用：var oState= {title: '下载' };window.history.pushState(oState, '下载', 'download?id=1')
特点：
pushState()可以创建历史
可以配合popstate事件
可以使用history.go(-1)返回到上一个页面。
window.addEventListener('popstate', function(evt){
var state = evt.state;
document.title= state.title;
}, false);
replaceState说明
window.history.replaceState(null,null,'download?id=1');完整使用：var oState= {title: '下载' };window.history.replaceState(oState, '下载', 'download?id=1');
特点：
replaceState不会加入到历史记录里面，
用history.go(-1)会跳过当前页面相当于是history.go(-2)。
具体请看下面代码：
1、页面初次加载，获取patch
document.addEventListener('DOMContentLoaded', () => {
console.log('load', location.pathname)
})
2、打开一个新路由
// 打开一个新路由
// 【注意】用pushState方法，浏览器不会刷新页面
document.getElementById('btn1').addEventListener('click', function(){
const state = {name: 'page1'}
console.log('切换路由到', 'page1')
history.pushState(state, 'page1', 'page1')
})
3、监听浏览器前进、后退
// 监听浏览器前进、后退
window.onpopstate = (event) => {
console.log('onpopstate', event.state,location.pathname)
}
注意：H5 history模式一定要运行在服务器模式下。需要用http-server这样的工具启动服务器。