前言
单页Web应用(single page web application,SPA),就是只有一张Web页面的应用,是加载单个HTML 页面并在用户与应用程序交互时动态更新该页面的Web应用程序。简单来说就是用户只需要加载一次页面就可以不再请求,当点击其他子页面时只会有相应的URL改变而不会重新加载。
我们可以将实现路由的过程分为两部分:
- 更新URL页面不刷新
- 监听URL的变化,执行页面替换逻辑
现在主流有2种实现方案:
- history.pushState等触发popstate事件
- location.hash的变化触发hashchange事件
接下来我们一步一步看Vue-router如何实现的
Vue-router源码解剖
构造器
请各位同学翻到 src/index.js 第18行
export default class VueRouter {static install: () => void;static version: string;app: any;apps: Array<any>;ready: boolean;readyCbs: Array<Function>;options: RouterOptions;mode: string;history: HashHistory | HTML5History | AbstractHistory;matcher: Matcher;fallback: boolean;beforeHooks: Array<?NavigationGuard>;resolveHooks: Array<?NavigationGuard>;afterHooks: Array<?AfterNavigationHook>;constructor (options: RouterOptions = {}) { this.app = nullthis.apps = []this.options = optionsthis.beforeHooks = []this.resolveHooks = []this.afterHooks = []this.matcher = createMatcher(options.routes || [], this)let mode = options.mode || 'hash'this.fallback = mode === 'history' && !supportsPushState && options.fallback !== falseif (this.fallback) {mode = 'hash'}if (!inBrowser) {mode = 'abstract'}this.mode = modeswitch (mode) {case 'history':this.history = new HTML5History(this, options.base)breakcase 'hash':this.history = new HashHistory(this, options.base, this.fallback)breakcase 'abstract':this.history = new AbstractHistory(this, options.base)breakdefault:if (process.env.NODE_ENV !== 'production') {assert(false, `invalid mode: ${mode}`)}}}
构造器接收一个options参数
默认mode为 "hash",如果显示传入参数mode为"history",则进行 是否支持的"history"的判断
this.fallback = mode === 'history' && !supportsPushState && options.fallback !== false
supportsPushState方法 里面 判断了 是否为浏览器环境且当前浏览器版本支持history
options.fallback用来控制路由,在设置了mode为"history"但是当前浏览器环境不支持"history"的情况下是否应该回调判断,并重新设置mode为"hash"。
设置fallback为false本质上是为了让"router-link"在IE9上可以完整的页面刷新,如果是在hash模式下面不支持SSR,设置为false,会让那些在ie9服务端渲染的app更好用。(这段话没具体应用过)
之后根据不同的mode,来执行不同的方案
HTML5History
构造器
构造器接收2个参数,router和base
router是在定义新路由的时候创建的对象
base如果没有传,则为undefined,
"?"这是通过一个名为flow的外部工具为javascript加上强类型检查的功能,不影响编译和运行。直接无视就好。
调动History的构造方法,History为 HTML5History,HashHistory,AbstractHistory的超类
在History的构造方法中,
如果base为undefined,查找是否有base的元素,有就赋值,没有就'/'
之后
const expectScroll = router.options.scrollBehaviorconst supportsScroll = supportsPushState && expectScrollif (supportsScroll) {setupScroll()}
判断路由参数,是否控制路由页面滚动条行为
监听popstate事件,跳转
获取当前location的值之后,
进行路由的更新,比如当前的History对应哪个路由
Html5History也添加了go,push,replace等方法用来路由跳转,
先保存滚动条状态,之后可以使用history的自带方法进行地址的改变
更多详情请见MDN
未完待续
HashHistory
构造器
调动History的构造方法,History为 HTML5History,HashHistory,AbstractHistory的超类
判断当前hash地址
如果开头不是/#,将当前location按照hash格式化
根据href获取当前hash,如果没有匹配到'#'返回空字符串。
初始化地址栏hash后
监听popstate事件,替换路由,控制滚动条行为
导航守卫
在registerHook将设置的守卫入栈
在每次跳转的时候,递归守卫集合,将触发的守卫进行解析和执行。
AbstractHistory
构造器
相对于上两种方法,AbstractHistory看起来要简单很多,这种模式是用于 Node.js 环境的,一般场景也就是在做测试的时候。但是在实际项目中其实还可以使用的,利用这种特性还是可以很方便的做很多事情的。(我没有用过)
因为不涉及和浏览器地址相关记录关联在一起;整体流程依旧和 HashHistory 是一样的,只是这里通过数组来模拟浏览器历史记录堆栈信息。
更新历史堆栈信息,更新当前所处位置
等等,除了不使用浏览器的history对象,其他的和html5history模式差不多。
小结
vue-router的源码剖析到这里就结束了,大概流程是这个样子,得益于开发人员代码的简洁性及可读性,我们阅读起来障碍还是没有那么多,难度也没有那么大,整体逻辑不复杂,但是想要把很多不复杂的细节,整合到一起,认真到细节,才是程序设计的美学。