學習前端路由和vue-router筆記

李文鵬發布于2019-08-23 15:06 / 1421人閱讀

摘要：前端路由原理本質就是監聽的變化，然后匹配路由規則，顯示相應的頁面，并且無須刷新。目前單頁面使用的路由就只有兩種實現方式就是，當后面的哈希值發生變化時，不會向服務器請求數據，可以通過事件來監聽到的變化，從而進行跳轉頁面。

前端路由原理本質就是監聽 URL 的變化，然后匹配路由規則，顯示相應的頁面，并且無須刷新。目前單頁面使用的路由就只有兩種實現方式

hash

history

www.test.com/##/ 就是 Hash URL，當 ## 后面的哈希值發生變化時，不會向服務器請求數據，可以通過 hashchange 事件來監聽到 URL 的變化，從而進行跳轉頁面。

vue-router hash實現源碼（完整源碼訪問https://github.com/vuejs/vue-...）：

/**
 * 添加 url hash 變化的監聽器
 */
setupListeners () {
  const router = this.router

  /**
   * 每當 hash 變化時就解析路徑
   * 匹配路由
   */
  window.addEventListener("hashchange", () => {
    const current = this.current
    /**
     * transitionTo: 
     * 匹配路由
     * 并通過路由配置，把新的頁面 render 到 ui-view 的節點
     */
    this.transitionTo(getHash(), route => {
      replaceHash(route.fullPath)
    })
  })
}

檢測到 hash 的變化后，就可以通過替換 DOM 的方式來實現頁面的更換。

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

兩個 API ，pushState和replaceState可以改變 url 地址且不會發送請求，還有onpopState事件。但因為沒有 # 號，所以當用戶刷新頁面之類的操作時，瀏覽器還是會給服務器發送請求。為了避免出現這種情況，所以這個實現需要服務器的支持，需要把所有路由都重定向到根頁面。具體可以訪問官網：https://router.vuejs.org/zh/g...

vue-router history實現源碼（完整源碼訪問https://github.com/vuejs/vue-...）

export class HTML5History extends History {
  constructor (router, base) {
    super(router, base)
    /**
     * 原理還是跟 hash 實現一樣
     * 通過監聽 popstate 事件
     * 匹配路由，然后更新頁面 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，不會導致瀏覽器發送請求，從而不會刷新頁面
      pushState(cleanPath(this.base + route.fullPath))
      onComplete && onComplete(route)
    }, onAbort)
  }

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

云服務器 GPU云服務器筆記本怎么連接無線路由器前端路由 js前端路由學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/101507.html

vue學習筆記（四）

摘要：提供了兩種向組件傳遞參數的方式。子路由項路徑不要使用開頭，以開頭的嵌套路徑會被當作根路徑。路由實例的方法這里學習兩個路由實例的方法和。實際上，是通過不同的將這些資源加載后打包，然后輸出打包后文件。一、vue-router 1、簡介我們經常使用vue開發單頁面應用程序（SPA）。在開發SPA過程中，路由是必不可少的部分，vue的官方推薦是vue-router。單頁面應用程序看起來好像...

frank_fun 2019-08-21 17:16 評論0 收藏0
vue學習筆記（四）

摘要：提供了兩種向組件傳遞參數的方式。子路由項路徑不要使用開頭，以開頭的嵌套路徑會被當作根路徑。路由實例的方法這里學習兩個路由實例的方法和。實際上，是通過不同的將這些資源加載后打包，然后輸出打包后文件。一、vue-router 1、簡介我們經常使用vue開發單頁面應用程序（SPA）。在開發SPA過程中，路由是必不可少的部分，vue的官方推薦是vue-router。單頁面應用程序看起來好像...

lwx12525 2019-08-01 17:50 評論0 收藏0
vue學習筆記4

摘要：主要當作屬性來使用方法表示一個具體的操作，主要書寫業務邏輯一個對象，鍵是需要觀察的表達式，值是對應回調函數。父組件向子組件傳值組件實例定義方式，注意：一定要使用props屬性來定義父組件傳遞過來的數據 // 創建 Vue 實例，得到 ViewModel var vm = new Vue({ el: '#app', data: {...

番茄西紅柿 2019-04-23 11:45 評論0 收藏0
關于Vue2一些值得推薦的文章 -- 五、六月份

摘要：五六月份推薦集合查看最新的請點擊集前端最近很火的框架資源定時更新，歡迎一下。蘇幕遮燎沈香宋周邦彥燎沈香，消溽暑。鳥雀呼晴，侵曉窺檐語。葉上初陽乾宿雨，水面清圓，一一風荷舉。家住吳門，久作長安旅。五月漁郎相憶否。小楫輕舟，夢入芙蓉浦。五、六月份推薦集合查看github最新的Vue weekly；請::點擊::集web前端最近很火的vue2框架資源；定時更新，歡迎 Star 一下。蘇...

sutaking 2019-08-02 15:17 評論0 收藏0