vue-router 跳转原理

vue-router路由的原理是经过改变网址,来实现页面的局部刷新,相比a标签跳转的不一样之处在于,路由跳转不须要刷新整个页面。

大概流程能够当作:

　　1. 浏览器发出请求

　　2.服务器监听到端口有请求过来,并解析url路径

　　3.根据服务器的路由配置,返回相应的信息(能够是HTML字符串、也能够是json数据、图片等等)

　　4.浏览器根据数据包的 Content-type 来决定如何解析数据

简单来讲路由就是用来跟后端服务器进行交互的一种方式，经过不一样的路径，来请求不一样的资源，请求不一样的页面是路由的其中一种功能。

 

前端的路由

hash模式

随着 ajax 的流行，异步数据请求交互运行在不刷新浏览器的状况下进行。而异步交互体验的更高级版本就是 SPA —— 单页应用。单页应用不单单是在页面交互是无刷新的，连页面跳转都是无刷新的，为了实现单页应用，因此就有了前端路由。
相似于服务端路由，前端路由实现起来其实也很简单，就是匹配不一样的 url 路径，进行解析，而后动态的渲染出区域 html 内容。可是这样存在一个问题，就是 url 每次变化的时候，都会形成页面的刷新。那解决问题的思路即是在改变 url 的状况下，保证页面的不刷新。在 2014 年以前，你们是经过 hash 来实现路由，url hash 就是相似于：

http://www.xxx.com/#login

这种 #。后面 hash 值的变化，并不会致使浏览器向服务器发出请求，浏览器不发出请求，也就不会刷新页面。另外每次 hash 值的变化，还会触发hashchange 这个事件，经过这个事件咱们就能够知道 hash 值发生了哪些变化。而后咱们即可以监听hashchange来实现更新页面部份内容的操做：

function matchAndUpdate () {
  // todo 匹配 hash作 dom 更新操做  
}
window.addEventListener('hashchange',matchAndUpdate )
// addEventListener() 方法用于向指定元素添加事件句柄。

 

Hash 方法是在路由中带有一个 #，主要原理是经过监听 # 后的 URL 路径标识符的更改而触发的浏览器 hashchange 事件，而后经过获取 location.hash 获得当前的路径标识符，再进行一些路由跳转的操做，参见 MDN

1. location.href：返回完整的 URL
2. location.hash：返回 URL 的锚部分
3. location.pathname：返回 URL 路径名
4. hashchange 事件：当 location.hash 发生改变时，将触发这个事件

好比访问一个路径  http://sherlocked93.club/base/#/page1，那么上面几个值分别为：

# http://sherlocked93.club/base/#/page1
{
  "href": "http://sherlocked93.club/base/#/page1",
  "pathname": "/base/",
  "hash": "#/page1"
}

注意： Hash 方法是利用了至关于页面锚点的功能，因此与原来的经过锚点定位来进行页面滚动定位的方式冲突，致使定位到错误的路由路径，所以须要采用别的办法，以前在写 progress-catalog 这个插件碰到了这个状况。