上一次，跟大家科普了小程序的自定義路由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形式的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分鐘徹底搞懂單頁面應用路由

單頁面應用特徵

hash 路由

特徵

原理

HTML5History 路由

特徵

原理

vue-router 源碼解讀

註冊插件

區分mode

全局註冊router-link組件

hash模式

HTML5History模式

transitionTo 處理路由變更邏輯

最後

如何基於surging跨網關跨語言進行緩存降級

2024合集

程序員天天 CURD，怎麼才能成長，職業發展的思考(2)

移位操作搞定兩數之商

教你用Perl實現Smgp協議

如何通過前端表格控件在10分鐘內完成一張分組報表？

win11關閉自動檢測病毒刪文件

千兆寬帶實際網速能到達多少？

[oeasy]python0015_鍵盤改造_將esc和capslock對調_hjkl_移動_雙手正位

springboot連接Redis報NOAUTH Authentication required

Java集合中的Map

教你用Perl實現Smgp協議

如何通過前端表格控件在10分鐘內完成一張分組報表？

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結