vue單頁(yè)面在微信下只能分享落地頁(yè)的解決方案
實(shí)際上關(guān)鍵詞叫 微信pushState只能分享落地頁(yè) 更貼切一點(diǎn)
應(yīng)用場(chǎng)景:
- vue + vue-router
- vue-router使用hash模式(history模式?jīng)]試過)
- 不使用微信的js-sdk(因?yàn)槲疫@個(gè)項(xiàng)目是可配置域名的商城,比較特殊,不能使用微信sdk)
這個(gè)方案并不是最優(yōu)秀的,會(huì)對(duì)性能造成一定的影響
HTML5 history.pushState
vue-router的內(nèi)部是通過 history.pushState 和 history.replaceState 實(shí)現(xiàn)的。但是iOS設(shè)備的微信瀏覽器不會(huì)去檢測(cè)它們的變化。但是我們可以通過更新 location.href 讓微信瀏覽器識(shí)別到當(dāng)前的url。
// vue-router/src/util/push-state.js export function pushState (url?: string, replace?: boolean) { saveScrollPosition() // try...catch the pushState call to get around Safari // DOM Exception 18 where it limits to 100 pushState calls const history = window.history try { if (replace) { history.replaceState({ key: _key }, '', url) } else { _key = genKey() history.pushState({ key: _key }, '', url) } } catch (e) { window.location[replace ? 'replace' : 'assign'](url) } } export function replaceState (url?: string) { pushState(url, true) }
解決方法
window.location.href = window.location.href
,這段代碼可以讓微信記錄當(dāng)前的url,且不會(huì)刷新頁(yè)面。可以在app.vue中 watch $route 在每次頁(yè)面更新的時(shí)候執(zhí)行一次。
// app.vue watch: { $route: { immediate: true, deep: true, handler(to) { // 微信瀏覽器判斷 const WECHAT_BROWSER = navigator.userAgent.toLowerCase().includes('micromessenger') // 解決iOS微信瀏覽器分享地址只能是落地頁(yè)的問題,這個(gè)操作是不會(huì)刷新頁(yè)面的,query參數(shù)改變也會(huì)執(zhí)行 if (WECHAT_BROWSER) { // eslint-disable-next-line window.location.href = window.location.href } } },
使用了上述方法可以解決這個(gè)問題,但是這會(huì)引出一個(gè)很奇葩的問題,在真機(jī)上進(jìn)入 http://192.168.1.5:8080 和 http://192.168.1.5:8080/#/ 這兩個(gè)頁(yè)面,其中有一個(gè)鏈接的bug依然存在。原因具體不清楚,經(jīng)過測(cè)試可以在入口文件(main.js)中在頁(yè)面還沒有展示內(nèi)容前刷新一次頁(yè)面,即可解決這個(gè)問題。
// main.js // 微信瀏覽器判斷 const WECHAT_BROWSER = navigator.userAgent.toLowerCase().includes('micromessenger') // 在url插入的search參數(shù),可以隨意,但是必須要 // 例:http://192.168.1.5:8080/?_wx_=1#/ const wxQuery = '_wx_=1' const isRepeatQuery = location.search.includes(wxQuery) if (WECHAT_BROWSER && !isRepeatQuery) { const unit = (location.search && location.search !== '?') ? '&' : '?' location.search += unit + wxQuery // 添加_wx_參數(shù),該操作會(huì)刷新頁(yè)面 }
上面的代碼之所以要在 hash 前面加一個(gè) ?_wx_=1 參數(shù),為了方便刷新頁(yè)面給一個(gè)標(biāo)志位判斷是否已刷新。參數(shù)的 key-value 隨意。
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vue-cli3.X快速創(chuàng)建項(xiàng)目的方法步驟
這篇文章主要介紹了vue-cli3.X快速創(chuàng)建項(xiàng)目的方法步驟,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11Vue3初探之ref、reactive以及改變數(shù)組的值
在setup函數(shù)中,可以使用ref函數(shù)和reactive函數(shù)來創(chuàng)建響應(yīng)式數(shù)據(jù),下面這篇文章主要給大家介紹了關(guān)于Vue3初探之ref、reactive以及改變數(shù)組值的相關(guān)資料,需要的朋友可以參考下2022-09-09vue?vue-touch移動(dòng)端手勢(shì)詳解
這篇文章主要介紹了vue?vue-touch移動(dòng)端手勢(shì)詳解,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-03-03Vue.js中數(shù)組變動(dòng)的檢測(cè)詳解
這篇文章給大家主要介紹了Vue.js中數(shù)組變動(dòng)的檢測(cè),文中給出了詳細(xì)的示例代碼和過程介紹,相信會(huì)對(duì)大家的理解和學(xué)習(xí)很有幫助,有需要的朋友們下面來一起看看吧。2016-10-10vue如何實(shí)現(xiàn)點(diǎn)擊選中取消切換
這篇文章主要介紹了vue實(shí)現(xiàn)點(diǎn)擊選中取消切換,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-05-05