持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第4天，点击查看活动详情
前言
vue中常用的模式有两种，hash模式和history模式，最显著的区别就是看浏览器地址中有没有#,带有#的是hash模式，没有的是history模式。还有一种是abstract模式，主要用于不支持浏览器api的环境中，基本没有遇见过。
Hash模式
原理：
hash路由是通过浏览器原生的hashchange事件来监听路由hash值的变化，切换不同的路由组件。
优点：
1.路由hash值变化后，不会刷新浏览器，也不会向后端发送请求。
2.hash改变会触发hashchange事件，能控制浏览器的前进后退。
3.兼容性好，大部分浏览器都支持。
4.路由有前端控制，不需要后端配置。
同样,有优点就会有缺点：
1.首先就是浏览器地址上会有#符号，看起来不美观。
2.hash值得改变只能监听#后面的值。
3.hash值得前后值必须不一致，否则hashchange无法监听到hash值的改变。
4.由于hash值得改变不会向后端发送http请求，所以不利于SEO优化
History模式
原理： history路由模式是基于HTML5新增的pushState()和replaceState()两个api,以及浏览器的popstate事件，当浏览器地址变化时，通过window.location.pathname找到对应的组件的名称，并于路由对象中定义的组件名称相对应显示不同的路由组件。 优点：
1.浏览器地址栏中没有#，比较美观。
2.pushState()可以设置与当前地址相同的路径，同样也会把地址添加到记录栈中。
3.浏览器的前进后退操作也会触发浏览器popstate事件，可以添加相应的事件。
4.每次url改变会向后端发送http请求，有利于SEO优化。
缺点：
1.URL的改变属于http请求，借助history.pushState实现页面的无刷新跳转，因此会重新请求服务器。
所以前端的URL必须和实际向后端发起请求的URL一致。如果用户输入的URL回车或者浏览器刷新或分享出去某个页面路径，
用户点击后，URL与后端配置的页面请求URL不一致，则匹配不到任何静态资源，会返回404页面。
所以需要后台配置支持，覆盖所有情况的候选资源，如果URL匹配不到任何静态资源，则应该返回app依赖的页面或者应用首页。
2.兼容性差，IE10之前都不支持。
两种路由模式在使用上没有什么优缺之分，全看项目场景。
