vue-router实现原理

1、单页面应用 

vue实现了单页面应用，什么是单页面应用呢，就是在网页上不刷新不跳转页面，你在网页上看到的所有页面跳转都是靠页面重新渲染完成的。就好比，你用手机看电子书，每看完一页，不是像实体书那样翻页，而是点击手机的下一页，手机在屏幕上再给渲染出下一页的内容。

vue没有真正意义上的页面跳转，所以页面间的跳转要靠路由完成，当url变化时，路由根据url的变化调用渲染页面的方法，渲染新的界面。

2、vue-router原理

根据上述所讲，一个路由插件至少需要满足的两个条件：（1）url发生改变，不会向后台发送请求；（2）url改变后，要重新渲染页面。

vue-router作为vue的路由插件，核心就是实现了上述两个功能，实现第（2）步比较容易，只要在路由跳转时调用vue的界面渲染方法即可，下面主要讲述第一步vue-router是怎么实现的。

vue-router实现url发生改变，不会向后台发送请求，其实它是利用了浏览器提供的接口：window.history以及window.location.hash。我们知道vue-router配置中有一个mode属性，它有两个选项：hash,histroy，这个属性决定了vue-router，调用浏览器的哪个接口实现路由功能。

var router = new vueRouter({
    mode: 'hash',//这里设置vue-router的模式
    routes: [
        {
            path: '/',
            component: index
        },
        {
            path: '/first',
            component: first
        }
    ]
})

（1）hash

 当mode属性使用”hash“时，你会发现在，你的vue在页面跳转时，url中会出现”#“

               

 

每次url改变时，都是”#“后的内容发生改变。vue-router此时调用了浏览器的window.location.hash接口，当你给window.location.hash赋不同的值时，只会改变url，而不会向后台发送请求。vue-router此时就是利用了window.location.hash的这个特点。

（2）history

当mode属性使用”history“时，页面跳转时url中会出现不会出现”#“，这时vue-router调用了window.history（以下简写成history）的replaceState或者pushState接口。

history这个浏览器提供的接口保存了你浏览网页的地址历史信息，信息以栈的形式进行存储。比如，你访问了a.html，然后又跳转到了b.html，那么history存储的信息如下图。

 

调用history.pushState接口，可以向历史栈中添加浏览历史数据，例如：调用 history.pushState({},'','c.html')(接口具体参数意义，请详见mdn：https://developer.mozilla.org/en-US/docs/Web/API/History/pushState，在此不做说明)，history存储数据如下

 

调用history.replaceState接口，则是替代栈顶的浏览器历史数据，例如：调用history.replaceState({},'','c.html')，则history的数据如下

 

无论是pushState接口，还是replaceState接口，都实现了改变url，而不向后台发送数据。vue-router的history模式，正是通过这种方式 ，实现了路由跳转。