vue を使用して Baidu 統計を実装する方法

この記事では、Baidu 統計コードを Vue シングルページ アプリケーションに追加するソリューションを主に紹介します。必要な友人はそれを参照してください。

Baidu 統計を申請した後、それぞれに挿入する必要がある JS コードを取得します。 JS プロジェクトで最初に思いつくのは、統計コードを Index.html エントリ ファイルに挿入して、グローバルに挿入してすべてのページで使用できるようにすることです。これには問題が伴います。 Vue.js プロジェクトは単一ページのアプリケーションであり、ユーザーが Web サイトを閲覧するたびに、内部ページにアクセスするときにページが更新されないため、Baidu 統計コードはトリガーされません。 Baidu の統計の背景は、Web ページ入口のトラフィックのみがカウントされ、内部ページへのアクセス トラフィックの統計はカウントされないことです。

解決策

main.js ファイルの vue-router の afterEach メソッドを呼び出し、このメソッドに統計コードを追加することで、ルーターが変更されるたびに統計コードが実行されるようにして、次のことを実現します。目的を達成するためのコードは次のとおりです:

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 中国語 Web サイトの他の関連記事を参照してください。