1、hash模式

简介：hash模式是开发中默认的模式，它的URL带着一个#，例如:http://www.abc.com/#/vue，它的hash值就是#/vue 。 特点：hash值会出现在URL里面，但是不会出现在HTTP请求中，对后端完全没有影响。所以改变hash值，不会重新加载页面。这种模式的浏览器支持度很好，低版本的IE浏览器也支持这种模式。hash路由被称为是前端路由，已经成为SPA (单页面应用)的标配。 原理: hash模式的主要原理就是onhashchange0事件:

window.onhashchange = function(event){
          
   
	console.log(event.olduRL，event.newURL);
	let hash = location.hash.slice(1);
}

使用onhashchange0事件的好处就是，在页面的hash值发生变化时，无需向后端发起请求window就可以监听事件的改变，并按规则加载相应的代码。除此之外，hash值变化对应的URL都会被浏览器记录下来，这样浏览器就能实现页面的前进和后退。虽然是没有请求后端服务器但是页面的hash值和对应的URL关联起来了。

2、history模式

简介：history模式的URL中没有#，它使用的是传统的路由分发模式，即用户在输入一个URL时，服务器会接收这个请求，并解析这个URL，然后做出相应的逻辑处理。 特点: 当使用history模式时，URL就像这样: http://abc.com/user/id。相比hash模式更加好看。但是，historv模式需要后台配置支持。如果后台没有正确配置，访问时会返回404。 API: history api可以分为两大部分，切换历史状态和修改历史状态: 修改历史状态:包括了 HTML5 History Interface 中新增的 pushstate() 和 replacestate() 方法，这两个方法应用于浏览器的历史记录栈，提供了对历史记录进行修改的功能。只是当他们进行修改时，虽然修改了ur，但浏览器不会立即向后端发送请求。如果要做到改变url但又不刷新页面的效果，就需要前端用上这两个API。 切换历史状态：包括forward()、back()、 go() 三个方法，对应浏览器的前进，后退，跳转操作。

虽然historv模式丢弃了丑陋的#。但是，它也有自己的缺点，就是在刷新页面的时候，如果没有相应的路由或资源，就会刷出404来。 如果想要切换到history模式，就要进行以下配置 (后端也要进行配置)：

const router = new VueRouter({
          
   
	mode: historyroutes: [...]
})