學(xué)習(xí)前端路由和vue-router筆記

李文鵬發(fā)布于2019-08-23 15:06 / 1427人閱讀

摘要：前端路由原理本質(zhì)就是監(jiān)聽(tīng)的變化，然后匹配路由規(guī)則，顯示相應(yīng)的頁(yè)面，并且無(wú)須刷新。目前單頁(yè)面使用的路由就只有兩種實(shí)現(xiàn)方式就是，當(dāng)后面的哈希值發(fā)生變化時(shí)，不會(huì)向服務(wù)器請(qǐng)求數(shù)據(jù)，可以通過(guò)事件來(lái)監(jiān)聽(tīng)到的變化，從而進(jìn)行跳轉(zhuǎn)頁(yè)面。

前端路由原理本質(zhì)就是監(jiān)聽(tīng) URL 的變化，然后匹配路由規(guī)則，顯示相應(yīng)的頁(yè)面，并且無(wú)須刷新。目前單頁(yè)面使用的路由就只有兩種實(shí)現(xiàn)方式

hash

history

www.test.com/##/ 就是 Hash URL，當(dāng) ## 后面的哈希值發(fā)生變化時(shí)，不會(huì)向服務(wù)器請(qǐng)求數(shù)據(jù)，可以通過(guò) hashchange 事件來(lái)監(jiān)聽(tīng)到 URL 的變化，從而進(jìn)行跳轉(zhuǎn)頁(yè)面。

vue-router hash實(shí)現(xiàn)源碼（完整源碼訪問(wèn)https://github.com/vuejs/vue-...）：

/**
 * 添加 url hash 變化的監(jiān)聽(tīng)器
 */
setupListeners () {
  const router = this.router

  /**
   * 每當(dāng) hash 變化時(shí)就解析路徑
   * 匹配路由
   */
  window.addEventListener("hashchange", () => {
    const current = this.current
    /**
     * transitionTo: 
     * 匹配路由
     * 并通過(guò)路由配置，把新的頁(yè)面 render 到 ui-view 的節(jié)點(diǎn)
     */
    this.transitionTo(getHash(), route => {
      replaceHash(route.fullPath)
    })
  })
}

檢測(cè)到 hash 的變化后，就可以通過(guò)替換 DOM 的方式來(lái)實(shí)現(xiàn)頁(yè)面的更換。

History 模式是 HTML5 新推出的功能，比之 Hash URL 更加美觀

兩個(gè) API ，pushState和replaceState可以改變 url 地址且不會(huì)發(fā)送請(qǐng)求，還有onpopState事件。但因?yàn)闆](méi)有 # 號(hào)，所以當(dāng)用戶刷新頁(yè)面之類的操作時(shí)，瀏覽器還是會(huì)給服務(wù)器發(fā)送請(qǐng)求。為了避免出現(xiàn)這種情況，所以這個(gè)實(shí)現(xiàn)需要服務(wù)器的支持，需要把所有路由都重定向到根頁(yè)面。具體可以訪問(wèn)官網(wǎng)：https://router.vuejs.org/zh/g...

vue-router history實(shí)現(xiàn)源碼（完整源碼訪問(wèn)https://github.com/vuejs/vue-...）

export class HTML5History extends History {
  constructor (router, base) {
    super(router, base)
    /**
     * 原理還是跟 hash 實(shí)現(xiàn)一樣
     * 通過(guò)監(jiān)聽(tīng) popstate 事件
     * 匹配路由，然后更新頁(yè)面 DOM
     */
    window.addEventListener("popstate", e => {
      const current = this.current

      // Avoiding first `popstate` event dispatched in some browsers but first
      // history route not updated since async guard at the same time.
      const location = getLocation(this.base)
      if (this.current === START && location === initLocation) {
        return
      }

      this.transitionTo(location, route => {
        if (supportsScroll) {
          handleScroll(router, route, current, true)
        }
      })
    })
  }

  go (n) {
    window.history.go(n)
  }

  push (location, onComplete, onAbort) {
    const { current: fromRoute } = this
    this.transitionTo(location, route => {
      // 使用 pushState 更新 url，不會(huì)導(dǎo)致瀏覽器發(fā)送請(qǐng)求，從而不會(huì)刷新頁(yè)面
      pushState(cleanPath(this.base + route.fullPath))
      onComplete && onComplete(route)
    }, onAbort)
  }

  replace (location, onComplete, onAbort) {
    const { current: fromRoute } = this
    this.transitionTo(location, route => {
      // replaceState 跟 pushState 的區(qū)別在于，不會(huì)記錄到歷史棧
      replaceState(cleanPath(this.base + route.fullPath))
      onComplete && onComplete(route)
    }, onAbort)
  }
}