使用vue如何實現百度統計

這篇文章主要介紹了vue單頁應用加百度統計程式碼的解決方法，需要的朋友參考下吧

申請百度統計後，會得到一段JS程式碼，需要插入到每個網頁中去，在Vue.js專案首先想到的可能是，把統計程式碼插入index.html入口檔案中，這樣就全域插入，每個頁面就都有了;這樣做就涉及到一個問題，Vue.js項目是單頁應用，每次使用者瀏覽網站時，造訪內頁時頁面是不會刷新的，也就意味著不會觸發百度統計程式碼；所以最終在百度統計後台看到的效果就是只統計到了網頁入口的流量，卻無法統計到內頁的訪問流量。

解決方法

在main.js檔案中呼叫vue-router的afterEach方法,將統計程式碼加入這個方法裡面，這樣每次router改變改變的時候都會執行一下統計程式碼，這樣就達到了目的,程式碼如下:

router.afterEach( ( to, from, next ) => {
 setTimeout(()=>{
   var _hmt = _hmt || [];
   (function() {
    //每次执行前，先移除上次插入的代码
    document.getElementById('baidu_tj') && document.getElementById('baidu_tj').remove();
    var hm = document.createElement("script");
    hm.src = "https://hm.baidu.com/hm.js?xxxx";
    hm.id = "baidu_tj"
    var s = document.getElementsByTagName("script")[0];
    s.parentNode.insertBefore(hm, s);
   })();
 },0);
} );

上面是我整理給大家的，希望今後會對大家有幫助。

相關文章：

在JS如何實作雙色球功能

在jQuery如何實作下雪動畫效果

在微信小程式中如何實作清單下拉刷新上拉載入效果？

以上是使用vue如何實現百度統計的詳細內容。更多資訊請關注PHP中文網其他相關文章！