区别：
-
hash模式是通过改变锚点(#)来更新页面URL，并不会触发页面重新加载，我们可以通过window.onhashchange监听到hash的改变，从而处理路由。
-
history模式是通过调用window.history对象上的一系列方法来实现页面的无刷新跳转。
实现：
hash
window.location.hash = 'qq' //设置url的hash，会在当前url后加上'#qq'
var hash = window.location.hash // '#qq'
window.addEventListener('hashChange',function(){
//监听hash变化，点击浏览器的前进后退会触发
})
history
window.history.pushState(state,title,url)
//state:需要保存的数据，这个数据在触发popstate事件时，可以在event.state里获取
//title:标题，基本没用，一般传null
//url:设定新的历史记录的url。新的url与当前url的origin必须是一致的，否则会抛出错误。url可以是绝对路径，也可以是相对路径。
//当前url是https://www.baidu.com/a/
//history.pushState(null, null, './qq/')=>https://www.baidu.com/a/qq/
//history.pushState(null, null, '/qq/')=>https://www.baidu.com/qq/
window.history.replaceState(state,title,url)
//与pushState基本相同，但它是修改当前历史记录，而pushState是创建新的历史记录
window.addEvevtListener('popstate',function(){
//监听浏览器前进后退事件，pushState与replaceState方法不会触发
})
window.history.back() //后退
window.history.forward() //前进
window.history.go(1) //前进一步，-2为后退两步
history模式改变url的方式会导致浏览器向服务器发送请求，这不是我们想看到的，我们需要在服务器端做处理：如果匹配不到任何静态资源，则应该始终返回同一个html页面。
特点：
hash
- 可以改变URL，但不会触发页面重新加载（hash的改变会记录在window.history中）因此并不算是一次http请求，所以这种模式不利于SEO优化
- 只能修改#后面的部分，因此只能跳转与当前URL同文档的URL
- 只能通过字符串改变URL
- 通过window.onhashchange监听hash的改变，借此实现无刷新跳转的功能
history
- 新的URL可以是与当前URL同源的任意URL，也可以与当前URL一样，但是这样会把重复的一次操作记录到栈中
- 通过参数stateObject可以添加任意类型的数据到记录中
- 可额外设置title属性供后续使用
- 通过pushState、replaceStates实现无刷新跳转的功能
总结：
- 在hash模式下，所有的页面跳转都是客户端进行操作，因此对于页面拦截更加灵活；但每次URL改变不属于一次http请求，所以不利于SEO优化。
- 在history模式下，借助history.pushState实现页面的无刷新跳转；这种方式改变来URL，如果重新刷新页面会造成一个新的http请求，因此会重新请求服务器，这使得我们必须在服务端配置好地址，否则服务端会返回404，为确保不出问题，最好在项目中配置404页面
路由传参：
//params传参
this.$router.push({
name:'message', //在router里边配置的name
params:{
userId:'1102'
}
})
//params取参
this.$route.params.userId
//query传参
this.$router.push({
path:'/login', //在router/index.js里边配置的路径
query:{
userId:'1102'
}
})
//query取参
this.$route.query.userId
