vue單頁應用加百度統(tǒng)計代碼（親測有效）
更新時間：2018年01月31日 16:38:58 作者：蓓蕾心晴
這篇文章主要介紹了vue單頁應用加百度統(tǒng)計代碼的解決方法，需要的朋友參考下吧
申請百度統(tǒng)計后，會得到一段JS代碼，需要插入到每個網頁中去，在Vue.js項目首先想到的可能就是，把統(tǒng)計代碼插入到index.html入口文件中，這樣就全局插入，每個頁面就都有了;這樣做就涉及到一個問題，Vue.js項目是單頁應用，每次用戶瀏覽網站時，訪問內頁時頁面是不會刷新的，也就意味著不會觸發(fā)百度統(tǒng)計代碼；所以最終在百度統(tǒng)計后臺看到的效果就是只統(tǒng)計到了網頁入口的流量，卻無法統(tǒng)計到內頁的訪問流量。
解決方法
在main.js文件中調用vue-router的afterEach方法,將統(tǒng)計代碼加入到這個方法里面，這樣每次router發(fā)生改變的時候都會執(zhí)行一下統(tǒng)計代碼，這樣就達到了目的,代碼如下:
router.afterEach( ( to, from, next ) => {
setTimeout(()=>{
var _hmt = _hmt || [];
(function() {
//每次執(zhí)行前，先移除上次插入的代碼
document.getElementById('baidu_tj') && document.getElementById('baidu_tj').remove();
var hm = document.createElement("script");
hm.src = "https://#/hm.js?xxxx";
hm.id = "baidu_tj"
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(hm, s);
})();
},0);
} );
總結
以上所述是小編給大家介紹的vue單頁應用加百度統(tǒng)計代碼，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網站的支持！
相關文章
這篇文章主要介紹了vue項目中自動導入svg并愉快的使用方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-11-11
這篇文章一開始先對Vue.js中v-show和v-if兩者的區(qū)別進行了簡單的介紹，而后通過圖文詳細給大家介紹了Vue.js使用v-show和v-if注意的事項，有需要的朋友們可以參考借鑒，下面來一起看看吧。2016-12-12
vue.js實現(xiàn)開關(switch)組件實例代碼
這篇文章介紹了vue.js實現(xiàn)開關(switch)組件的實例代碼，文中通過示例代碼介紹的非常詳細。對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2022-06-06
今天小編就為大家分享一篇Vue在頁面數(shù)據(jù)渲染完成之后的調用方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
這篇文章主要介紹了前端框架vue，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-04-04
Vue3?Suspense實現(xiàn)優(yōu)雅處理異步數(shù)據(jù)加載
Suspense?是?Vue?3?中用于處理異步數(shù)據(jù)加載的特性,它使得在加載異步數(shù)據(jù)時可以提供更好的用戶體驗,下面小編就來和大家詳細講講Suspense如何優(yōu)雅處理異步數(shù)據(jù)加載吧2023-10-10
最近在做一個vue移動端項目，被緩存問題搞得頭都大了，積累了一些經驗，特此記錄總結下，分享到腳本之家平臺，對vue移動端項目緩存問題實踐記錄感興趣的朋友跟隨小編一起看看吧2018-10-10
這篇文章主要介紹了vue 組件開發(fā)原理與實現(xiàn)方法,結合實例形式詳細分析了vue.js組件開發(fā)的原理與實現(xiàn)方法,需要的朋友可以參考下2019-11-11
這篇文章主要介紹了vue父子組件的互相傳值和調用，幫助大家更好的理解和學習使用vue框架，感興趣的朋友可以了解下2021-04-04
這篇文章主要介紹了vue3 elementplus table合并寫法,本文通過實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-06-06