html单页面原理,10分钟彻底搞懂单页面应用路由

上一次，跟大家科普了小程序的自定义路由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

然