vue-router源码

路由原理

前端路由的实现原理.

采用某种方式使url发生改变。这种方式可能是调用HTML5 history API实现,也可能是点击前进后退

或者改变路由hash.但是不管采用哪种方式,它都不能造成浏览器刷新,仅仅只是单纯的url发生变化.

监听到url的变化之后,根据不同的路径获取渲染内容,再把内容填充到div容器里.从上面案例可知,监

听url的变化一般在两个地方,第一是在window.onpopstate包裹的回调函数里,第二是在执行

history.pushState或history.replaceState的后面.

vue-router的底层逻辑同样如此,比如平时中经常使用的<router-link to="home">类似于上面案例中

的a标签,它的底层就是利用history.pushState或history.replaceState(当路由mode选择'history'时)改

变url的.而<router-view/>相当于上方app容器元素,监听不同路径再根据路径值拿到相应的页面组件并渲染出来.
 

后端路由

缺点：每次url地址都会触发服务器，服务器来解析的，像京东淘宝这种大型的， 对服务器压力别较大，就会出现前端路由

前端路由：

 vue-router 是vue这个技术栈实现前端路由的一个方法

其中第二步触发监听事件，不同模式触发会不同， hash模式会用hashchange触发监听事件，

Hash和History：

vue.use作用：1.执行里面的方法    2. 然后new了一个路由实例（创建路由实例）  说明这个vue-router的源码一定是个构造函数

在上面VueRouter构造函数里主要做了两件事.

第一它会根据mode配置不同生成相对应的history对象,history对象是具体执行各种路由操作的执行者.
第二它通过调用createMatcher函数生成了this.matcher对象.这个this.matcher正是解决我们上面遭遇的路径匹配的难题.
————————————————

在nodemodules看源码，

 然后构造函数暴露到入口文件里

 根据  curent ，当前的规则路由表，找到对应的模块（组件）

路由守卫，路由拦截：

实现原理