茫茫人海中与你相遇
相信未来的你不会很差
作者:百度小程序技术
来源:https://segmentfault.com/a/1190000023509417
single-page
。在第一次进入应用时,即返回了唯一的 html
页面和它的公共静态资源,后续的所谓“跳转”,都不再从服务端拿 html
文件,只是 DOM
的替换操作,是模(jia)拟(zhuang)的。 那么js又是怎么捕捉到组件切换的时机,并且无刷新变更浏览器url呢?靠 hash
和 HTML5History
。
www.xiaoming.html#bar
就是哈希路由,当 #
后面的哈希值发生变化时,不会向服务器请求数据,可以通过 hashchange
事件来监听到 URL 的变化,从而进行DOM
操作来模拟页面跳转History
模式是 HTML5 新推出的功能,比之 hash 路由的方式直观,长成类似这个样子www.xiaoming.html/bar
,模拟页面跳转是通过 history.pushState(state, title, url)
来更新浏览器路由,路由变化时监听 popstate
事件来操作DOM
以 Vue
的路由vue-router
为例,我们一起来撸一把它的源码。
Tips:因为,本篇的重点在于讲解单页面路由的两种模式,所以,下面只列举了一些关键代码,主要讲解:
注册插件
VueRouter的构造函数,区分路由模式
全局注册组件
hash / HTML5History模式的 push 和监听方法
transitionTo 方法
install
方法的自觉,给 Vue
爸爸去 use
。
install.js
文件中,定义了注册安装插件的方法install
,给每个组件的钩子函数混入方法,并在beforeCreate
钩子执行时初始化路由:Vue.mixin({ beforeCreate () { if (isDef(this.$options.router)) { this._routerRoot = this this._router = this.$options.router this._router.init(this) Vue.util.defineReactive(this, '_route', this._router.history.current) } else { this._routerRoot = (this.$parent && this.$parent._routerRoot) || this } registerInstance(this, this) }, // 全文中以...来表示省略的方法 ...});
index.js
找到整个插件的基类 VueRouter
,不难看出,它是在 constructor
中,根据不同 mode
采用不同路由实例的。
...import {install} from './install';import {HashHistory} from './history/hash';import {HTML5History} from './history/html5';...export default class VueRouter { static install: () => void; constructor (options: RouterOptions = {}) { if (this.fallback) { mode = 'hash' } if (!inBrowser) { mode = 'abstract' } this.mode = mode switch (mode) { case 'history': this.history = new HTML5History(this, options.base) break case 'hash': this.history = new HashHistory(this, options.base, this.fallback) break case 'abstract': this.history = new AbstractHistory(this, options.base) break default: if (process.env.NODE_ENV !== 'production') { assert(false, `invalid mode: ${mode}`) } } }}
、
又是在哪里引入的呢? 回到 install.js
文件,它引入并全局注册了 router-view、router-link组件:
import View from './components/view';import Link from './components/link';...Vue.component('RouterView', View);Vue.component('RouterLink', Link);
在 ./components/link.js
中,
组件上默认绑定了 click
事件,点击触发 handler
方法进行相应的路由操作。
const handler = e => { if (guardEvent(e)) { if (this.replace) { router.replace(location, noop) } else { router.push(location, noop) } }};
就像最开始提到的, VueRouter
构造函数中对不同 mode
初始化了不同模式的 History 实例,因而 router.replace、router.push
的方式也不尽相同。接下来,我们分别扒拉下这两个模式的源码。
HashHistory
类,这货继承自 history/base.js 的 History
基类。 它的 prototype
上定义了 push
方法:在支持 HTML5History 模式的浏览器环境中( supportsPushState
为 true),调用 history.pushState
来改变浏览器地址;其他浏览器环境中,则会直接用 location.hash = path
来替换成新的 hash 地址。 其实最开始读到这里是有些疑问的,既然已经是 hash 模式为何还要判断 supportsPushState
?是为了支持 scrollBehavior
, history.pushState
可以传参key过去,这样每个url历史都有一个key,用 key 保存了每个路由的位置信息。 同时,原型上绑定的 setupListeners
方法,负责监听 hash 变更的时机:在支持 HTML5History 模式的浏览器环境中,监听 popstate
事件;而其他浏览器中,则监听 hashchange
。监听到变化后,触发 handleRoutingEvent
方法,调用父类的 transitionTo
跳转逻辑,进行 DOM 的替换操作。
import { pushState, replaceState, supportsPushState } from '../util/push-state'...export class HashHistory extends History { setupListeners () { ... const handleRoutingEvent = () => { const current = this.current if (!ensureSlash()) { return } // transitionTo调用的父类History下的跳转方法,跳转后路径会进行hash化 this.transitionTo(getHash(), route => { if (supportsScroll) { handleScroll(this.router, route, current, true) } if (!supportsPushState) { replaceHash(route.fullPath) } }) } const eventType = supportsPushState ? 'popstate' : 'hashchange' window.addEventListener( eventType, handleRoutingEvent ) this.listeners.push(() => { window.removeEventListener(eventType, handleRoutingEvent) }) } push (location: RawLocation, onComplete?: Function, onAbort?: Function) { const { current: fromRoute } = this this.transitionTo( location, route => { pushHash(route.fullPath) handleScroll(this.router, route, fromRoute, false) onComplete && onComplete(route) }, onAbort ) }}...// 处理传入path成hash形式的URLfunction getUrl (path) { const href = window.location.href const i = href.indexOf('#') const base = i >= 0 ? href.slice(0, i) : href return `${base}#${path}`}...// 替换hashfunction pushHash (path) { if (supportsPushState) { pushState(getUrl(path)) } else { window.location.hash = path }}// util/push-state.js文件中的方法export const supportsPushState = inBrowser && (function () { const ua = window.navigator.userAgent if ( (ua.indexOf('Android 2.') !== -1 || ua.indexOf('Android 4.0') !== -1) && ua.indexOf('Mobile Safari') !== -1 && ua.indexOf('Chrome') === -1 && ua.indexOf('Windows Phone') === -1 ) { return false } return window.history && typeof window.history.pushState === 'function' })()
HTML5History
类定义在 history/html5.js 中。 定义 push
原型方法,调用 history.pusheState
修改浏览器的路径。 与此同时,原型 setupListeners
方法对 popstate
进行了事件监听,适时做 DOM 替换。
import {pushState, replaceState, supportsPushState} from '../util/push-state';...export class HTML5History extends History { setupListeners () { const handleRoutingEvent = () => { const current = this.current; const location = getLocation(this.base); if (this.current === START && location === this._startLocation) { return } this.transitionTo(location, route => { if (supportsScroll) { handleScroll(router, route, current, true) } }) } window.addEventListener('popstate', handleRoutingEvent) this.listeners.push(() => { window.removeEventListener('popstate', handleRoutingEvent) }) } push (location: RawLocation, onComplete?: Function, onAbort?: Function) { const { current: fromRoute } = this this.transitionTo(location, route => { pushState(cleanPath(this.base + route.fullPath)) handleScroll(this.router, route, fromRoute, false) onComplete && onComplete(route) }, onAbort) }}...// util/push-state.js文件中的方法export function pushState (url?: string, replace?: boolean) { saveScrollPosition() const history = window.history try { if (replace) { const stateCopy = extend({}, history.state) stateCopy.key = getStateKey() history.replaceState(stateCopy, '', url) } else { history.pushState({ key: setStateKey(genStateKey()) }, '', url) } } catch (e) { window.location[replace ? 'replace' : 'assign'](url) }}
this.transitionTo
,这到底是个啥呢?它其实是定义在 history/base.js 基类上的原型方法,用来处理路由的变更逻辑。
const route = this.router.match(location, this.current)
对传入的值与当前值进行对比,返回相应的路由对象;接着判断新路由是否与当前路由相同,相同的话直接返回;不相同,则在 this.confirmTransition
中执行回调更新路由对象,并对视图相关DOM进行替换操作。
export class History { ... transitionTo ( location: RawLocation, onComplete?: Function, onAbort?: Function ) { const route = this.router.match(location, this.current) this.confirmTransition( route, () => { const prev = this.current this.updateRoute(route) onComplete && onComplete(route) this.ensureURL() this.router.afterHooks.forEach(hook => { hook && hook(route, prev) }) if (!this.ready) { this.ready = true this.readyCbs.forEach(cb => { cb(route) }) } }, err => { if (onAbort) { onAbort(err) } if (err && !this.ready) { this.ready = true // https://github.com/vuejs/vue-router/issues/3225 if (!isRouterError(err, NavigationFailureType.redirected)) { this.readyErrorCbs.forEach(cb => { cb(err) }) } else { this.readyCbs.forEach(cb => { cb(route) }) } } } ) } ...}
我们在虚拟的空间与你相遇,期待可以碰撞出不一样的火花