上一次，跟大家科普了小程序的自定义路由routes，开启了路由之旅；明天，趁势就单页面利用路由，跟大家唠个五毛钱，如果唠得不好……退…一块钱？单页面利用特色
假如： 在一个 web 页面中，有1个按钮，点击可跳转到站内其余页面。
多页面利用： 点击按钮，会从新加载一个html资源，刷新整个页面；
单页面利用： 点击按钮，没有新的html申请，只产生部分刷新，能营造出一种靠近原生的体验，如丝般顺滑。
SPA 单页面利用为什么能够简直无刷新呢？因为它的SP——single-page。在第一次进入利用时，即返回了惟一的html页面和它的公共动态资源，后续的所谓“跳转”，都不再从服务端拿html文件，只是DOM的替换操作，是模（jia）拟（zhuang）的。
那么js又是怎么捕捉到组件切换的机会，并且无刷新变更浏览器url呢？靠hash和HTML5History。
hash 路由
特色
- 相似
www.xiaoming.html#bar就是哈希路由，当#前面的哈希值发生变化时，不会向服务器申请数据，能够通过hashchange事件来监听到 URL 的变动，从而进行DOM操作来模仿页面跳转 - 不须要服务端配合
- 对 SEO 不敌对
原理
HTML5History 路由
特色
History模式是 HTML5 新推出的性能，比之 hash 路由的形式直观，长成相似这个样子www.xiaoming.html/bar，模仿页面跳转是通过history.pushState(state, title, url)来更新浏览器路由，路由变动时监听popstate事件来操作DOM- 须要后端配合，进行重定向
- 对 SEO 绝对敌对
原理
vue-router 源码解读
以 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) }, // 全文中以...来示意省略的办法 ...});辨别mode
而后，咱们从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}`) } } }}全局注册router-link组件
这个时候，咱们兴许会问：应用 vue-router 时， 常见的<router-link/>、 <router-view/>又是在哪里引入的呢？
回到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 中，<router-link/>组件上默认绑定了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的形式也不尽相同。接下来，咱们别离扒拉下这两个模式的源码。
hash模式
history/hash.js 文件中，定义了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模式
相似的，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) }}transitionTo 解决路由变更逻辑
下面提到的两种路由模式，都在监听时触发了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) }) } } } ) } ...}最初
好啦，以上就是单页面路由的一些小常识，心愿咱们能一起从入门到永不放弃~~