vue微信分享出來的鏈接點(diǎn)開是首頁問題的解決方法
最近工作上遇到了這樣一個Bug：“vue微信分享出來的鏈接點(diǎn)開是首頁”
公司網(wǎng)站有PC端和移動端，兩個版本。其中如果手機(jī)訪問PC端，則自動跳轉(zhuǎn)到移動端。（這是常規(guī)操作，沒啥稀奇點(diǎn)。）
可神奇的問題來了。
在移動端中有微信分享功能，如果手機(jī)直接訪問手機(jī)端的地址進(jìn)入子頁面分享，點(diǎn)開分享的鏈接進(jìn)入的是子頁面。但是如果是從PC端跳轉(zhuǎn)進(jìn)入手機(jī)端，分享子頁面鏈接打開將會是主頁。
這個問題我也百度了各種方法，折騰了一天，然而都沒啥用。
最后自己想了一個替代方案：
在static目錄下新建一個名為html的文件夾，在html文件夾中再新建一個redirect.html（看到這個文件名是不是知道我要干啥了）
沒錯，我們做一個重定向。
html中寫入以下內(nèi)容
<script>
let url = location.href.split('?')
let pars = url[1].split('&')
let data = {}
pars.forEach((n, i) => {
let p = n.split('=')
data[p[0]] = p[1]
})
if (!!data.app3Redirect) {
self.location = decodeURIComponent(data.app3Redirect)
}
</script>
只需要script標(biāo)簽就可以了，反正只是做重定向。
接下來就簡單了，原本設(shè)置給微信的分享鏈接是
shareWxLink = window.location.href
現(xiàn)在我們給他改成
shareWxLink = window.location.href.split('#')[0] + 'static/html/redirect.html?app3Redirect=' + encodeURIComponent(window.location.href)
這樣，我們就把當(dāng)前頁的地址編碼后放到參數(shù)app3Redirect里面，當(dāng)訪問redirect.html時將自動重定向到解碼后的原地址。
到此，終于把這個坑爹的Bug給修復(fù)了。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
Vue 按照創(chuàng)建時間和當(dāng)前時間顯示操作(剛剛,幾小時前,幾天前)
這篇文章主要介紹了Vue 按照創(chuàng)建時間和當(dāng)前時間顯示操作(剛剛,幾小時前,幾天前)，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09
antd upload上傳組件如何獲取服務(wù)端返回?cái)?shù)據(jù)
這篇文章主要介紹了antd upload上傳組件如何獲取服務(wù)端返回?cái)?shù)據(jù)問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-02-02
Vite?構(gòu)建環(huán)境分為開發(fā)環(huán)境和生產(chǎn)環(huán)境,不同環(huán)境會有不同的構(gòu)建策略,本文就來介紹下Vite 配置文件,具有一定的參考價(jià)值,感興趣的可以了解一下2024-08-08
這篇文章主要介紹了開發(fā)一個封裝iframe的vue組件，幫助大家更好的理解和學(xué)習(xí)使用vue框架，感興趣的朋友可以了解下2021-03-03
Vue實(shí)現(xiàn) 點(diǎn)擊顯示再點(diǎn)擊隱藏效果(點(diǎn)擊頁面空白區(qū)域也隱藏效果)
這篇文章主要介紹了Vue實(shí)現(xiàn) 點(diǎn)擊顯示 再點(diǎn)擊隱藏 點(diǎn)擊頁面空白區(qū)域也隱藏效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-01-01
Vue是構(gòu)建Web界面的JavaScript庫，原稱為Vue.js，它可以通過簡潔的API來提供高效的數(shù)據(jù)綁定和靈活的組件系統(tǒng)，本文詳細(xì)介紹了Vue的使用安裝和相關(guān)知識，有興趣的同學(xué)可以參考借鑒2023-03-03
這篇文章主要介紹了簡述vue狀態(tài)管理模式之vuex，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
詳解vue 路由跳轉(zhuǎn)四種方式 (帶參數(shù))
這篇文章主要介紹了vue 路由跳轉(zhuǎn)四種方式 (帶參數(shù))，本文通過實(shí)例代碼給大家介紹的詳細(xì)，具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2019-04-04
這篇文章主要介紹了vue組寫一個組件,需要的朋友可以參考下2018-04-04
深入了解vue中一鍵復(fù)制功能的實(shí)現(xiàn)
在現(xiàn)代的Web應(yīng)用中,用戶體驗(yàn)至關(guān)重要,而提供簡單易用的復(fù)制功能是改善用戶體驗(yàn)的一項(xiàng)關(guān)鍵功能,本文將為大家詳細(xì)介紹Vue實(shí)現(xiàn)一鍵復(fù)制功能的具體方法,需要的可以參考下2023-11-11