摘要：場景再現(xiàn)眾所周知，有三種模式，一般的前端項目中會選擇模式進行開發(fā)，最近做了一個運營活動就是基于的模式進行開發(fā)的。項目注冊了兩個路由抽象出來的入口頁面需要參數(shù)，所以提供瀏覽器里輸入回車后，頁面自動增加一個變?yōu)椤?/p>

眾所周知，vue-router有三種模式 ：hash、html5、abstract ， 一般的前端項目中會選擇hash模式進行開發(fā)，最近做了一個運營活動就是基于vue-router的hash模式進行開發(fā)的。

項目注冊了兩個路由(抽象出來的Demo)

var router = new VueRouter({
    routes: [{
        name: "index",
        path: "",
        component: indexcomponent
    },{
        name: "demo",
        path: "/demo",
        component: democomponent
    }]
});

入口頁面需要參數(shù)，所以提供URL:https://www.xxx.com?from=weixin, 瀏覽器里輸入URL回車后，頁面自動增加一個#/變?yōu)?b>https://www.xxx.com?from=weixin#/。

index頁面中一個按鈕點擊后跳轉(zhuǎn)demo,同時想攜帶index中獲取的參數(shù)，看API選擇了如下方式，結(jié)果URL變成了：https://www.xxx.com?from=weixin#/test?userId=123

router.push({ 
    path: "demo",
    query: { 
        plan: "private"
    }
})

URL有什么標準？（上面Demo頁面跳轉(zhuǎn)后URL看起來怪怪的）

vue-router是如何控制URL的？

統(tǒng)一資源定位符（或稱統(tǒng)一資源定位器/定位地址、URL地址等，英語：Uniform Resource Locator，?？s寫為URL）

標準格式：scheme:[//authority]path[?query][#fragment]

==例子==

下圖展示了兩個 URI 例子及它們的組成部分。

                hierarchical part
    ┌───────────────────┴─────────────────────┐
                authority               path
    ┌───────────────┴───────────────┐┌───┴────┐
abc://username:[email protected]:123/path/data?key=value&key2=value2#fragid1
  └┬┘   └───────┬───────┘ └────┬────┘ └┬┘           └─────────┬─────────┘ └──┬──┘
scheme  user information     host     port                  query         fragment
urn:example:mammal:monotreme:echidna
  └┬┘ └──────────────┬───────────────┘
scheme              path

『？』

路徑與參數(shù)分隔符

瀏覽器只識別url中的第一個『？』，后面的會當做參數(shù)處理

『#』

『#』一般是頁面內(nèi)定位用的，如我們最熟悉不過的錨點定位

瀏覽器可以通過『onhashchange』監(jiān)聽hash的變化

http請求中不包含#

Request Headers中的Referer不包含#

改變#不觸發(fā)網(wǎng)頁重載

url中#后面出現(xiàn)的任何字符都會被截斷。（http://www.xxx.com/?color=#fff發(fā)出請求是：/color=）

改變#會改變history

window.location.hash讀取#值

URL讀取和操作涉及l(fā)ocation和history兩個對象，具體如下：

location API ：

屬性

href = protocol + hostName + port + pathname + search + hash

host

origin

方法

assign

href

replace ,不記錄history

reload

history API：

方法

back()

forward()

go()

H5新增API

pushState()

replaceState()

popstate監(jiān)聽變化

初始化router的時候，根據(jù)指定的mode選擇路由實現(xiàn)，當然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}`)
        }
}

我們選擇hash模式進行深入分析，對應(yīng)HashHistory模塊，該模塊是history/hash.js實現(xiàn)的，當被調(diào)用的時候，對全局路由變化進行了監(jiān)聽

window.addEventListener(supportsPushState ? "popstate" : "hashchange", () => {
      ...
})

同時hash.js中也實現(xiàn)了push等api方法的封裝，我們以push為例，根據(jù)源碼可以看出，它的實現(xiàn)是基于基類transitionTo的實現(xiàn)，具體如下：

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

既然調(diào)用了transitionTo那么來看它的實現(xiàn)，獲取參數(shù)后調(diào)用confirmTransition

transitionTo (location: RawLocation, onComplete?: Function, onAbort?: Function) {
    // 獲取URL中的參數(shù)
    const route = this.router.match(location, this.current)
    this.confirmTransition(route, () => {
      this.updateRoute(route)
      onComplete && onComplete(route)
      this.ensureURL()
      ...
    })
  }

同時confirmTransition里實現(xiàn)了一個隊列，順序執(zhí)行，iterator通過后執(zhí)行next,進而志新pushHash()，實現(xiàn)頁面hash改變,最終實現(xiàn)了${base}#${path}的連接

function getUrl (path) {
  const href = window.location.href
  const i = href.indexOf("#")
  const base = i >= 0 ? href.slice(0, i) : href
  return `${base}#${path}`
}

function pushHash (path) {
  if (supportsPushState) {
    pushState(getUrl(path))
  } else {
    window.location.hash = path
  }
}

https://www.xxx.com?from=weixin#/test?userId=123這個頁面看起來感覺怪，是因為這個連接中幾乎包含了所有的參數(shù)，而且hash里面還有一個問號，一個URL中多個問號的不常見

vue-router也是基于基本的URL操作來進行URL切換的，在基本基礎(chǔ)上進行了封裝。里面很多思路還是應(yīng)該多學(xué)習(xí)借鑒的。比如實現(xiàn)的隊列、繼承的運用等

標準的URL應(yīng)該是 search + hash ，不要被當下各種框架欺騙，誤以參數(shù)應(yīng)該在hash后面拼接

URL中可以有多個問號，但為了便于理解，還是盡量避免這種寫法

避免上面尷尬問題的一個方法是 HTML5 Histroy 模式，感興趣的同學(xué)可以關(guān)注并實踐一下

了解原理，了解設(shè)計模式，可以借鑒到平時開發(fā)項目中

https://github.com/vuejs/vue-...

https://developer.mozilla.org...

https://en.wikipedia.org/wiki...

https://www.cnblogs.com/qingg...

http://www.cnblogs.com/qinggu...

https://segmentfault.com/p/12...

https://segmentfault.com/a/11...