10分钟彻底搞懂微信小程序单页面应用路由

单页面应用特征

「假设：」在一个 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 不友好

原理

hash

html5history 路由

特征

history 模式是 html5 新推出的功能，比之 hash 路由的方式直观，长成类似这个样子www.xiaoming.html/bar ，模拟页面跳转是通过 history.pushstate(state, title, url) 来更新浏览器路由，路由变化时监听 popstate 事件来操作dom
需要后端配合，进行重定向
对 seo 相对友好

原理

html5history

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形式的url
function geturl (path) {
 const href = window.location.href
 const i = href.indexof('#')
 const base = i >= 0 ? href.slice(0, i) : href
 return `${base}#${path}`
}
...

// 替换hash
function 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)
  })
  }
 }
 }
 )
 }
 ...
}

最后

好啦，以上就是单页面路由的一些小知识，希望我们能一起从入门到永不放弃~~

到此这篇关于10分钟彻底搞懂微信小程序单页面应用路由的文章就介绍到这了,更多相关小程序单页面应用路由内容请搜索www.887551.com以前的文章或继续浏览下面的相关文章希望大家以后多多支持www.887551.com！

10分钟彻底搞懂微信小程序单页面应用路由

单页面应用特征

hash 路由

vue-router 源码解读

hash模式

最后

相关推荐