在我们面试的过程中,我们经常会被问道路由的模式有哪些,还有他们的不同处在哪里. 在回答这个问题时,我首先要了解到底什么是路由,及路由的作用是什么?它是干嘛的? 一般我们首先会去百度一下,

路由（routing）就是通过互联的网络把信息从源地址传输到目的地址的活动。 路由发生在OSI网络参考模型中的第三层即网络层。 路由引導分组轉送，經過一些中間的節點後，到它們最後的目的地。 作成硬體的話，則稱為路由器。

当然我们可能还是不太了解,其实我们可以用大白话来解释它.比如说你下班后需要开车回家,在你开车之前一定会打开地图查看一下哪些路段 .然后再决定从那条路回去，类似的,有关数据包移动的决策是根据网络的状态做出的，路由器负责做出这些逻辑数据决策。 了解完路由后,我们来了解一下关于路由的几种模式.

第一种:

hash模式:

1-特点：hash模式的url地址上有'#'

<a href='#/aaa'>1(#/aaa)</a>

其中#/aaa就是我们的hash值,并且hash值并不会传给服务器

2-实现的原理：原生的hashChange事件，主要是通过事件监听hash值得变化 window.onHashChange=function(){} 3-刷新页面：不会不发生请求，页面不会有任何问题，不需要后端配合 而且hash模式的兼容性比较好.不过他因为带有'#'所以他的美观行没有history 模式好.

第二种:

history 模式

1-url地址上没有'# '

2-实现的原理

利用的history api来实现的 popState() pushState()来实现的 history API 是 H5 提供的新特性，允许开发者直接更改前端路由，即更新浏览器 URL 地址而不重新发起请求。其中popState() pushState()它们是通过再不进行刷新的情况下，来操作浏览器的历史记录。唯一不同的是，popState()是新增一个历史记录，pushState()是直接替换当前的历史记录

3-刷新页面： 会发送请求然后会导致页面出现找不到404 需要后端配合解决不过他的兼容性没有hash模式好.

第三种:

abstract模式:

abstract 是vue路由中的第三种模式，本身是用来在不支持浏览器API的环境中，充当fallback，而不论是hash还是history模式都会对浏览器上的url产生作用，他一般要实现的功能就是在已存在的路由页面中内嵌其他的路由页面，而保持在浏览器当中依旧显示当前页面的路由path，这就是abstract这种与浏览器分离的路由模式。