【項(xiàng)目情況】vue單頁面應(yīng)用(spa) + hash路由，要求統(tǒng)計(jì)用戶對每個(gè)頁面的訪問情況
【實(shí)現(xiàn)代碼】在router/index.js或main.js中實(shí)現(xiàn)以下代碼
router.beforeEach((to, from, next) => {
// 在生產(chǎn)環(huán)境，發(fā)送百度統(tǒng)計(jì)
/* eslint no-underscore-dangle: ["error", { "allow": ["_hmt"] }]*/
if (window.location.hostname === '生產(chǎn)環(huán)境域名' && to.path) {
if (window._hmt) {
window._hmt.push(['_trackPageview', '/#' + to.fullPath]);
} else {
window._hmt = [];
(function () {
let hm = document.createElement('script');
hm.src = 'https://#/hm.js?百度統(tǒng)計(jì)ID';
let s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(hm, s);
})();
}
}
next();
});
【分析】
1、參考官網(wǎng)
2、邏輯整理
在路由守衛(wèi)router.beforeEach中實(shí)現(xiàn)
項(xiàng)目采取hash路由，并要求統(tǒng)計(jì)用戶對每個(gè)頁面的訪問情況，所以在路由守衛(wèi)中發(fā)送統(tǒng)計(jì)數(shù)據(jù)。
另外，如果使用的是History路由，還可以在統(tǒng)計(jì)平臺進(jìn)行“單頁應(yīng)用設(shè)置”：【管理】-> 左側(cè)導(dǎo)航欄中的【代碼管理-單頁應(yīng)用設(shè)置】，詳細(xì)內(nèi)容參考官網(wǎng)：http://#baidu.com/web/help/article?id=324&type=0
未使用官網(wǎng)上的<script>...</script>
避免開發(fā)環(huán)境的訪問數(shù)據(jù)也上傳到統(tǒng)計(jì)平臺。并且，對線上域名進(jìn)行了匹配(line4)
當(dāng)然，也可以在百度統(tǒng)計(jì)平臺進(jìn)行“過濾規(guī)則設(shè)置”：【管理】-> 對應(yīng)監(jiān)控域名的【更多設(shè)置】中的【過濾規(guī)則設(shè)置】，在該頁面中進(jìn)行設(shè)置
