在vue中,由於是單頁面SPA,所以需要使用錨點來定位,在vue的官方文檔中提到過也可以不使用錨點的情況,就是在vue-router中使用history模式,這樣,在url中就不會出現丑陋的#了,但是這樣的缺點在於不能再頁面中再使用自己設定的錨點(利用href、name或id)並且需要后台的支持,所以一般我們使用帶#的形式就可以了。
而在這之中一種比較特殊的情況在於,如果查詢字符串和vue中的錨點同時出現,那么他們的位置關系是怎樣的問題, 通過測試可以發現,vue自身的錨點在查詢字符串之前或者在查詢字符串之后都是可以正確的獲取頁面的。最近的一個小項目就是這樣的,即在微信授權登陸完成之后,后台返回一個url,這個url會附帶一個帶有用戶id的查詢字符串,如果我們希望獲得查詢字符串,就是使用 window.location.search 了。
比如下面兩種url:
// 第一種 http://www.ou.cn/wechat2/index.html#/commodity/payment?49973067 // 第二種 http://www.ou.cn/wechat2/index.html?49973067#/commodity/payment
這兩種方式都是可以獲取到內容的。
但是,第一種方式是不規范的,因為我們在使用 location.search 獲取查詢字符串的時候,內容為空,即將之作為了錨點的一部分。 但是使用第二種方式是更為規范的,這種方式可以准確識別查詢字符串。
即對於第一種,我們使用location.hash獲取到的是#以及后面所有的內容,而第二種就可以通過 location.hash 獲取到錨點部分, 通過 location.search 獲取到查詢字符串。
說明: 實際上,這樣的查詢字符串是不規范的,查詢字符串都應該是鍵值對的方式,而不應該是這種只有一串數字的方式。
另外,在微信中的坑: 必須要以#進入之后,才能正確的copy到hash,否則是得不到的。