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