vue在微信
問題1: vue單頁面項目hash模式下的非一級頁面實現微信分享,分享出去的頁面會跳回首頁
問題分析:微信分享中:只要是分享出去的頁面,如果為hash模式(在路由中帶有#號),微信都會在#的前邊給加一個‘?’。而vue單頁面程序中除了一級頁面以外的其他頁面都是通過#/后面的路由導航過去的,so,理所當然就被華麗麗的截掉了,於是就會發現你二級頁面分享出去的鏈接點進去是一級頁面
踩過的坑:試過網上的方法,新建一個ridrect.html做重定向,的確挺有用,然而畢竟分享的是一個很奇怪的鏈接,出現一些奇怪的問題也沒毛病,然而作為一個有追求的程序猿,這個方法是一定要pass的
解決方案:/*有bug了,下次繼續*/
坑了好久,不僅坑了,還挖了好幾個新坑,對不起大家,新做的項目沒有bug,哈哈,趕緊回來填填
(1)簡單粗暴,直接將自己的頁面定為一級頁面問題就不是問題了,哈哈,我在說什么廢話
(2)正經方案:在分享的鏈接上帶上一個自定義的分享標識參數來標記你要分享的二級頁面,在App.vue里面根據這個標識判斷一下頁面的來源並根據參數指示將路由跳轉到相應的頁面即可,當然不要忘記把其他參數帶過去哦。比如我在該項目中有 兩個二級頁面要分享
const shareWxLink1 = getPageUrl('article/detail', { id: this.id, channelId: this.channelId, fromType: 'detail' }) const shareWxLink2 = getPageUrl('article/list', { channelId: this.channelId, fromType: 'list' })
在App.vue中就能根據fromType來判斷並進行相應的跳轉
const fromType = this.$route.query.fromType if (fromType === 'detail') { window.location.href = getPageUrl('article/detail', { id: this.$route.query.id, channelId: this.$route.query.channelId }) } else if (fromType === 'list') { window.location.href = getPageUrl('article/list', { channelId: this.$route.query.channelId }) }
問題2: vue項目同路由頁面跳轉,只改變了頁面參數,點擊跳轉后發現頁面並沒有變化,查看路由會發現路由已經變化,但頁面就是不變
解決方案:總有人看不慣我的優秀,打擾我創作,這次沒bug,有新需求了,下次繼續