vue를 사용하여 Baidu 통계를 구현하는 방법

이 글에서는 주로 Vue 단일 페이지 애플리케이션에 Baidu 통계 코드를 추가하는 솔루션을 소개합니다. 필요한 친구는 이를 참고할 수 있습니다.

Baidu 통계를 신청한 후 각 애플리케이션에 삽입해야 하는 JS 코드 조각을 받게 됩니다. Vue에서 가장 먼저 생각나는 것은 index.html 항목 파일에 통계 코드를 삽입하여 모든 페이지에서 사용할 수 있도록 하는 것입니다. Vue.js 프로젝트는 단일 페이지 애플리케이션으로, 사용자가 웹사이트를 탐색할 때마다 내부 페이지에 액세스할 때 페이지가 새로 고쳐지지 않습니다. 즉, Baidu 통계 코드가 실행되지 않으므로 최종 효과가 표시됩니다. 바이두 통계 배경은 웹페이지 접속 트래픽만 집계되고, 내부 페이지 접속 트래픽 통계는 집계할 수 없다는 점이다.

Solution

main.js 파일에서 vue-router의 afterEach 메소드를 호출하고, 이 메소드에 통계 코드를 추가하면 라우터가 변경될 때마다 통계 코드가 실행되어 To를 달성합니다. 목적을 달성하기 위한 코드는 다음과 같습니다.

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에서 눈 애니메이션 효과 구현 방법

목록 풀다운 새로 고침 풀업 로딩 효과 구현 방법 WeChat 애플릿에서?

위 내용은 vue를 사용하여 Baidu 통계를 구현하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!