摘要:場景再現眾所周知,有三種模式,一般的前端項目中會選擇模式進行開發,最近做了一個運營活動就是基于的模式進行開發的。項目注冊了兩個路由抽象出來的入口頁面需要參數,所以提供瀏覽器里輸入回車后,頁面自動增加一個變為。
場景再現
眾所周知,vue-router有三種模式 :hash、html5、abstract , 一般的前端項目中會選擇hash模式進行開發,最近做了一個運營活動就是基于vue-router的hash模式進行開發的。
項目注冊了兩個路由(抽象出來的Demo)
var router = new VueRouter({ routes: [{ name: "index", path: "", component: indexcomponent },{ name: "demo", path: "/demo", component: democomponent }] });
入口頁面需要參數,所以提供URL:https://www.xxx.com?from=weixin, 瀏覽器里輸入URL回車后,頁面自動增加一個#/變為https://www.xxx.com?from=weixin#/。
index頁面中一個按鈕點擊后跳轉demo,同時想攜帶index中獲取的參數,看API選擇了如下方式,結果URL變成了:https://www.xxx.com?from=weixin#/test?userId=123
router.push({ path: "demo", query: { plan: "private" } })產生質疑
URL有什么標準?(上面Demo頁面跳轉后URL看起來怪怪的)
vue-router是如何控制URL的?
質疑探究 URL標準統一資源定位符(或稱統一資源定位器/定位地址、URL地址等,英語:Uniform Resource Locator,常縮寫為URL)
標準格式:scheme:[//authority]path[?query][#fragment]
==例子==
下圖展示了兩個 URI 例子及它們的組成部分。
URL中的『?』『#』hierarchical part ┌───────────────────┴─────────────────────┐ authority path ┌───────────────┴───────────────┐┌───┴────┐abc://username:password@example.com:123/path/data?key=value&key2=value2#fragid1
└┬┘ └───────┬───────┘ └────┬────┘ └┬┘ └─────────┬─────────┘ └──┬──┘
scheme user information host port query fragmenturn:example:mammal:monotreme:echidna
└┬┘ └──────────────┬───────────────┘
scheme path
『?』
路徑與參數分隔符
瀏覽器只識別url中的第一個『?』,后面的會當做參數處理
『#』
『#』一般是頁面內定位用的,如我們最熟悉不過的錨點定位
瀏覽器可以通過『onhashchange』監聽hash的變化
http請求中不包含#
Request Headers中的Referer不包含#
改變#不觸發網頁重載
url中#后面出現的任何字符都會被截斷。(http://www.xxx.com/?color=#fff發出請求是:/color=)
改變#會改變history
window.location.hash讀取#值
URL讀取和操作URL讀取和操作涉及location和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監聽變化
vue-router路由實現淺析初始化router的時候,根據指定的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}`) } }
我們選擇hash模式進行深入分析,對應HashHistory模塊,該模塊是history/hash.js實現的,當被調用的時候,對全局路由變化進行了監聽
window.addEventListener(supportsPushState ? "popstate" : "hashchange", () => { ... })
同時hash.js中也實現了push等api方法的封裝,我們以push為例,根據源碼可以看出,它的實現是基于基類transitionTo的實現,具體如下:
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) }
既然調用了transitionTo那么來看它的實現,獲取參數后調用confirmTransition
transitionTo (location: RawLocation, onComplete?: Function, onAbort?: Function) { // 獲取URL中的參數 const route = this.router.match(location, this.current) this.confirmTransition(route, () => { this.updateRoute(route) onComplete && onComplete(route) this.ensureURL() ... }) }
同時confirmTransition里實現了一個隊列,順序執行,iterator通過后執行next,進而志新pushHash(),實現頁面hash改變,最終實現了${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這個頁面看起來感覺怪,是因為這個連接中幾乎包含了所有的參數,而且hash里面還有一個問號,一個URL中多個問號的不常見
vue-router也是基于基本的URL操作來進行URL切換的,在基本基礎上進行了封裝。里面很多思路還是應該多學習借鑒的。比如實現的隊列、繼承的運用等
總結標準的URL應該是 search + hash ,不要被當下各種框架欺騙,誤以參數應該在hash后面拼接
URL中可以有多個問號,但為了便于理解,還是盡量避免這種寫法
避免上面尷尬問題的一個方法是 HTML5 Histroy 模式,感興趣的同學可以關注并實踐一下
了解原理,了解設計模式,可以借鑒到平時開發項目中
參考文檔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...
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/96825.html
摘要:場景再現眾所周知,有三種模式,一般的前端項目中會選擇模式進行開發,最近做了一個運營活動就是基于的模式進行開發的。項目注冊了兩個路由抽象出來的入口頁面需要參數,所以提供瀏覽器里輸入回車后,頁面自動增加一個變為。 場景再現 眾所周知,vue-router有三種模式 :hash、html5、abstract , 一般的前端項目中會選擇hash模式進行開發,最近做了一個運營活動就是基于vue-...
摘要:起因今天用打包的時候發現不加壓縮居然比加上還要小,命令行分兩次輸入回車的時候是正常的。反復實驗多次,打印也正常。拐回頭看我們的代碼我們來對比一下對錯寫法一個小失誤,順便附上我的翻版必究 起因 今天用webpack 打包的時候發現 不加 set NODE_ENV 壓縮 居然比加上 set NODE_ENV 還要小,命令行 分兩次輸入 set NODE_ENV=production (回...
摘要:最近開始移動端頁面的時候,被和坑了一把,于是決定對這兩個對象進行一個全面的剖析。但出于隱私方面的原因,對象不再允許腳本訪問已經訪問過的實際。唯一保持使用的功能只有和方法。華為執行完之后,我們發現不能回退了,是不是就跟實現同樣的效果了。 最近開始移動端頁面的時候,被window.location和window.history坑了一把,于是決定對這兩個對象進行一個全面的剖析。下面進行我們的...
摘要:和事件可用于處理。循環中的代碼塊將針對每個屬性執行一次。返回值是被找到的值。是被視為節點樹的。將新元素作為父元素的最后一個子元素進行添加。返回指定的屬性值。把指定屬性設置或修改為指定的值。年齡必須是與之間的數字。 JS JS DOM onload 和 onunload 事件會在用戶進入或離開頁面時被觸發。onload 事件可用于檢測訪問者的瀏覽器類型和瀏覽器版本,并基于這些信息來加載網...
摘要:也就是說,在大多數情況下,他們只關注標簽中的,而忽略標簽周圍的上下文。就算對于大多數正常使用瀏覽器的用戶來說,人們也容易只被標簽中的內容吸引,而忽略上下文。總之,保持標簽中的關鍵字簡潔是非常重要的。 什么是標簽 官方定義是這樣的: The HTML element (or anchor element) creates a hyperlink to other web pages,...
閱讀 3794·2021-11-17 09:33
閱讀 2011·2021-10-26 09:51
閱讀 1527·2021-09-29 09:44
閱讀 1678·2019-08-30 15:55
閱讀 1447·2019-08-30 15:52
閱讀 2325·2019-08-30 15:43
閱讀 3432·2019-08-29 17:00
閱讀 2302·2019-08-29 16:23