黄焖鸡米粥

本打算开始深入源码，跟原来阅读源码的方式一样。 但是总觉得这样有哪里不对劲，是的，一味的看着源码也只能猜测代码的思路，并不能证明这思路就是正确的。 于是我打算换一种方式阅读源码，于是想到了打断点调试。 然而在尝试调试 vue 的源码期间，我遇到了不少问题，所以干脆就总结成这篇文…

也许你日常中经常使用到 new Vue() 来实例化一个 Vue 对象，但你却不知道它到底做了什么操作。你想知道，于是你打开 Vue 的源码，但被庞大的代码吓跑了。你不是一个人，我也一样。 来来去去我也打开过很多次 Vue 的源码，到现在依旧会有点抵抗。但我觉得还是需要先把我理…

最后来了解了解 vue-router 的两个组件 <router-link> 和 <router-view>。 在打开源码之前，先来简单思考一下，组件可以怎样去实现。 <router-link> 可以是一个 <a> 标签，to 是它的 props，然后绑定一个点击事件。 还记得…

Router 调用构造函数时，保存了一个 match 属性。 然后在执行 transitionTo 时，就用到了这个属性（函数）。 match 保存的是 createMatcher 执行后返回的一个函数，传入的是 options.routes。 执行 match 函数，需传入目…

在看 HashHistory 和 HTML5History 的实现时，涉及到父类 History 与其 transitionTo 方法。 在路由发生跳转的时候，需要调用 transitionTo 方法，其中里面便实现了导航守卫。 HashHistory 和 HTML5Histo…

前端的路由模式包括了 Hash 模式和 History 模式。 vue-router 在初始化的时候，会根据 mode 来判断使用不同的路由模式，从而 new 出了不同的对象实例。例如 history 模式就用 HTML5History，hash 模式就用 HashHistor…

在 template 中我们用 &#x3C;router-link> 来做路由跳转，用 &#x3C;router-view> 来做路由跳转后的展示。 在 js 中，先用 Vue.use 来安装 vue-router，然后 new 一个 VueRouter 实例，最后将实例注入到…

通过上篇，我们知道前端理由的两种实现方法，Hash 路由与 History 路由，并且用它们分别实现了一个前端路由。 接下来我们就将 Vue 与 Hash 路由结合，实现一个非常简单的 vue-router 吧。 这里会有 router-link 和 router-view 两…

在学习 vue-router 的代码之前，先来简单了解一下前端路由。 先来看看这两种方法的实现原理。 接着我们将用它们来简单实现一个自己的前端路由。 url 的 hash 是以 # 开头，原本是用来作为锚点，从而定位到页面的特定区域。当 hash 改变时，页面不会因此刷新，浏览…