监听router_Vue-Router模拟实现-hash模式

本文使用 Zhihu On VSCode 创作并发布

前言：有时候坚定不移地想要去做一件事，最后却常常失败，不是因为心灵不够强大，只是太容易被突发之事左右，变得迷失掉初衷所愿的方向

希望自己能在拉勾大前端训练营中不断成长，不改初衷~

模拟 VueRouter 的 hash 模式的实现

vue-router是什么？

官方定义：是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。

个人理解：这里的路由并不是指我们平时所说的硬件路由器，这里的路由就是SPA（单页应用）的路径管理器。（项目打包完成后只有一个index.html和一些静态资源。页面的跳转将不再是请求服务端，跳转服务端相应的路径；所有的路由仅仅是建立起的url与页面之间的映射关系，页面间的跳转都仅仅是前端映射的处理，每跳转一个页面，如果有相应的数据要求，则通过ajax请求更改响应式数据data）

SPA(single page application):单一页面应用程序，只有一个完整的页面；它在加载页面时，不会加载整个页面，而是只更新某个指定的容器中内容。单页面应用(SPA)的核心之一是: 更新视图而不重新请求页面;vue-router在实现单页面前端路由时，提供了两种方式：Hash模式和History模式；根据mode参数来决定采用哪一种方式。

Hash模式

• URL中#后面的内容作为路径地址
• 监听hashchange事件
• 根据当前路由地址找到对应组件重新渲染

类图构造

Image

属性

options：记录构造函数中传入对象

data：一个响应式对象（obeerver实现），该对象中有一个属性current（记录当前路由地址，当路径改变的时候通过当前路径在 routerMap 对象中找到对应的组件，渲染 router-view）

routeMap：一个对象，记录路由地址和组件间的对应关系，路由规则会解析到这个对象中

方法

install：静态方法，用来实现vue的插件机制并调用init方法

constructor：初始化上诉属性

init：调用initEvents、createRouteMap、initComponents三个方法，目的是把不同使用途径