Vue-Router

路由的概念相信⼤部分同学并不陌⽣，它的作⽤就是根据不同的路径映射到不同的视图。我们在⽤ Vue    开发过实际项⽬的时候都会⽤到    Vue-Router    这个官⽅插件来帮我们解决路由的问题。Vue-Router 的能⼒⼗分强⼤，它⽀持        hash    、    history    、    abstract        3    种路由⽅式，提供了        <router-link>    和        <router-view>        2    种组件，还提供了简单的路由配置和⼀系列好⽤的    API。

⼤部分同学已经掌握了路由的基本使⽤，但使⽤的过程中也难免会遇到⼀些坑，那么这⼀章我们就来 深挖    Vue-Router    的实现细节，⼀旦我们掌握了它的实现原理，那么就能在开发中会路由的使⽤更加游 刃有余。

同样我们也会通过⼀些具体的⽰例来配合讲解，先来看⼀个最基本使⽤例⼦：

VueRouter    对象 

 

matcher

 

 

总结

那么到此，    matcher        相关的主流程的分析就结束了，我们了解了    Location    、    Route    、    RouteRecord        等概念。并通过        matcher        的        match        ⽅法，我们会找到匹 配的路径        Route    ，这个对        Route        的切换，组件的渲染都有⾮常重要的指导意义。下⼀节我们会回 到        transitionTo        ⽅法，看⼀看路径的切换都做了哪些事情。
 

路径切换    

 

导航守卫 

 

 

总结

那么⾄此我们把路由的        transitionTo        的主体过程分析完毕了，其他⼀些分⽀⽐如重定向、别名、滚 动⾏为等同学们可以⾃⾏再去分析。 路径变化是路由中最重要的功能，我们要记住以下内容：路由始终会维护当前的线路，路由切换的时 候会把当前线路切换到⽬标线路，切换过程中会执⾏⼀系列的导航守卫钩⼦函数，会更改    url，同样也 会渲染对应的组件，切换完毕后会把⽬标线路更新替换当前线路，这样就会作为下⼀次的路径切换的 依据。