ホームページ >ウェブフロントエンド >jsチュートリアル >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); } );
上記は私が皆さんのためにまとめたもので、将来的に皆さんのお役に立てれば幸いです。
関連記事:
リストプルダウン・リフレッシュ・プルアップ読み込み効果を実装する方法WeChat アプレット内で?
以上がvue を使用して Baidu 統計を実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。