10分鐘徹底搞懂微信小程序單頁面應用路由

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)
 },
 // 全文中以...來表示省略的方法
 ...
});

...
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}`)
 }
 }
 }
}

import View from './components/view';
import Link from './components/link';
...
Vue.component('RouterView', View);
Vue.component('RouterLink', Link);

const handler = e => {
 if (guardEvent(e)) {
 if (this.replace) {
 router.replace(location, noop)
 } else {
 router.push(location, noop)
 }
 }
};

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'
 })()

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)
 }
}

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)
  })
  }
 }
 }
 )
 }
 ...
}