1.前言
现在工作 几乎都是以Vue框架进行开发,使用方面到都OK，但是每次被问一些细节 就总也说不到点上，
所以想着 趁着现在工作不忙还有空闲时间 在重新学一下,并且希望借着这次学习 更多的了解，写的不好的地方，也请大家多批评
2.简易版本 - 代码实现
2.1 需求分析
- spa页面不能刷新
- 根据 url 显示对应的内容
2.2任务
- 实现VueRouter类：
- 处理路由选项
- 处理路由选项
- 响应这个变化
- 实现install 方法：
- $router注册
- 两个全局组件
2.3.0 实现
因为我们项目中使用 this.$router 的地方
所以我们现在需要将$router 挂载到Vue的原型上去,这样我们所有的组件才能正常的使用$router 干活
但是我们现在发现了在new Vue 执行之前先执行的是 Vue.use()
所以首先 Vue实例就不存在 更别提Vue实例上挂的router实例了
我们可以使用Vue的全局混入 Vue.mixin() 将 router 实例挂载过程延迟到Vue实例构建之后来执行
2.3.1 router-link
我们知道 router-link 实现渲染啊标签 eg: '#/about'
但是我们会发现 如果router-link 使用template 来实现的话
浏览器会报一个这样的错误
当时查了一下：查出来的结果好像是因为现在执行的版本是runtime-only没办法执行运行时的编译，没有办法解析模版字符串...
-所以只能使用render(h) 自己来写 => return h(标签, 属性, 插槽)
2.3.2 VueRouter类
刚才2.2中 盘算下 需要干的几件事
1 处理路由选项
2. 监控url 变化
3. 响应这个变化
2.3.3 router-view
我们只需要 通过路由表 拿到对应的component 咔咔 一return 就完事了
来来来一起看下结果
看着是没啥问题 成的地方也显示出来东西了 ， 瞎写的地址 也成功报错了
但是会发现 我切换 上面三个标签 会发现... 不中... url地址变了 但是 component 不跟我这换
为啥 不中... 因为在2.3.2 VueRouter类实现中 current 不是响应式数据
所以当我想要变成响应式 就必须将current 变成响应式数据 -> Vue.util.defineReactive(obj,key,value)
但是在VueRouter中 Vue并没有被定义,我们也不能使用import 在引一个 Vue出来 ....
这样在打包的时候把Vue也打包进去 所以不能整一个强依赖进来....
只能在 install 方法中 将Vue构造函数 保存起来
这下简易版本的VueRouter算是初步堆出来了
2.3.4 嵌套路由
上述的实现 当如果出现嵌套路由的话... 会发现直接gg
ummm... 当时看了下 源码
当时连查 带问 带看的 - 也没太具体明白说的是个啥事
大概是:
1.先标记一下 标记 routerView 这种类型的组件 这样在想上查找的时候 就知道谁是routerView组件谁不是了 从而知道 当前深度是不是需要增加
2.创建匹配数组 eg： /about/info ->
相当于我们需要先匹配/about 第一级
在匹配/about/info 第二级 -> 也就是说我们这个matched数组 应该是一个有顺序的数组
好吧 现在照猫画虎 整一下
重构VueRouter类 - 声明响应式匹配数组，创建匹配方法
重构router-view
再看下 写的效果 @@
3.后记
以上就是Vue学习的开始,希望接下来的 会对你有所帮助， 也请大家多多提出批评
