前言：

vue项目是一个SPA（singe page app）项目，整个网站只有一个html文件，前端路由是利用监听网址的改变，然后去切换在index.html文件中渲染的组件模板，来达到切换页面的效果。 监听网址的变化有两种方式：pathname、hash，也就是我们下面讲的两种路由模式

路由模式

路由器分别有两种模式,一种是hash模式,另一种是history模式,在使用vue-cli以及vue-router默认搭建的vue项目,如果不做特殊的配置,默认就是hash模式。

history 模式：

history采用HTML5的新特性；且提供了两个新方法：pushState（），replaceState（）可以对浏览器历史记录栈进行修改，以及popState事件的监听到状态变更。

1.什么是 history模式:路径直接拼接在端口号后面，后面的路径也会随着http请求发给服务器。（会给后端发起网络请求）

2.设置 history模式 ：在实例化配置对象中添加mode模式,值为history就可以了的， 经过改造后,hash模式就会变成history模式。

3.原理：history 底层切换组件的方式是使用的H5的 window.history 的技术，当地址栏的 history 状态发生变化时，切换了 router-view 渲染的组件，来“欺骗”用户，达到切换网页的效果，需要后端配合。

注意：在使用history模式的时候路径会随着http请求发给服务器，项目打包部署时，如果后端没做配置，页面刷新，前端路径就会被当成资源去请求服务器，资源找不到就会报错404

2.hash 模式：

什么是哈希模式：

• 路径中从#开始，后面的所有路径都叫做路由的哈希值；

• 哈希值：它不会作为路径的一部分随着http请求，发给服务器。

原理：hash 底层切换组件的方式是使用的老技术Hash值，当地址栏的 hash 变化时，并不会向后端做网络请求，但是前端会根据哈希值的改变，切换了 router-view 渲染的组件，来“欺骗”用户，达到切换网页的效果，hash值是不会发送给 后端的，所以不需要后端配合。

http://localhost/#home

特点: #号后面的参数不会传送给服务器,兼容性好,不会作为路径的一部分发送给服务器,也就是它不会包括在HTTP请求体中,对后端完全没有影响,只是我们前端同学自己操作。

页面刷新时,会停留在当前页面,不会重新加载

注意：在 hash模式下,使用hash符号之前的内容会被包含在请求体中,#号后面的不会发送给服务器

hash模式与history模式的区别：

• 如果使用history模式，项目部署上线时需要后端配合，因为在使用history模式的时候路径会随着http请求发给服务器，项目打包部署时，如果后端没做配置，页面刷新，前端路径就会被当成资源去请求服务器，资源找不到就会报错404，而使用hash模式，#后面的路径在网络请求时不会发送给服务器

• hash模式：路径中多了#，会不美观，而history模式地址干净，视觉上美观。

• hash模式比history模式兼容性好

• history模式，应用部署上线时，需要后端人员支持，解决刷新页面服务器404的问题。

直白点：就是hash模式请求路由，只需要一次网络请求，加载好html文件，切换组件也不需要再去做网络请求了。 而history模式请求路由，只要切换组件（就会改变pathname），就需要再一次去做网络请求，再要去加载那份html文件（不然就会404.）