【前端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);
    } );

轉載地址：https://blog.jae.sh/article/v924mq.html