vueRouter的实现原理

前端路由一般情况下有两种模式：hash和history模式
在vue-router内部它实现了两个全局组件，分别是：<router-link></router-link>和<router-view></router-view>
hash模式实现：
router-link实现的逻辑
实现router-link组件，router-link实际上就是a标签，需要将a标签的href属性设置成使用<router-link></router-link>组件时外部传递的to属性
监听hashchange事件，通过location.hash来获取到hash值保存到一个变量current中
router-view实现的逻辑
对当前的router-view组件进行标记：this.$vnode.data.routerView = true
标记当前路由的层级：depath = 0
通过while循环不断的向上查找父节点，判断当前父节点上是否存在routerView = true
标记当前路由的层级：depath = 0
通过while循环不断的向上查找父节点，判断父节点上是否存在routerView属性（parent.$parent.data && parent.$parent.data.routerView）,如果存在就让当前depath层级加1
实现一个match方法，循环routes，判断path属性和current属性是否匹配，如果能够匹配上就将当前匹配到router添加到数组match中，继续判断当前router是否存在chilfren，如果存在就递归查找所有route，吧path属性和current匹配到route添加到matched数组
通过层级depath去matched数组查找到对应的组件进行渲染

history模式实现：
给router-link添加一个点击事件，将current的值设置成router-link组件外部传递进来的to属性值
监听popState事件，通过location.pathname来获取到路径，并赋值给current
调用pushState方法来切换路由