So implementieren Sie Baidu-Statistiken mit Vue

In diesem Artikel wird hauptsächlich die Lösung zum Hinzufügen von Baidu-Statistikcode zur Vue-Einzelseitenanwendung vorgestellt. Freunde, die ihn benötigen, können darauf verweisen

Nachdem Sie sich für Baidu-Statistiken beworben haben, erhalten Sie einen JS-Code Im Vue.js-Projekt fällt mir vielleicht als Erstes ein, den statistischen Code in die Eintragsdatei index.html einzufügen, damit er global eingefügt werden kann und auf jeder Seite verfügbar ist ; Dies beinhaltet ein Problem, Vue.js Das Projekt ist eine Einzelseitenanwendung. Jedes Mal, wenn ein Benutzer die Website durchsucht, wird die Seite beim Zugriff auf die interne Seite nicht aktualisiert, was bedeutet, dass der Baidu-Statistikcode nicht ausgelöst wird. Der letzte Effekt, der im Hintergrund der Baidu-Statistik zu sehen ist, besteht darin, dass nur die Webseite gezählt wird. Der Verkehr des Eingangs kann nicht gezählt werden, der Verkehr der internen Seiten kann jedoch nicht gezählt werden.

Lösung

Rufen Sie die afterEach-Methode von vue-router in der Datei main.js auf und fügen Sie den Statistikcode wie folgt zu dieser Methode hinzu Bei jeder Änderung des Routers wird der statistische Code ausgeführt, wodurch der Zweck erreicht wird. Der Code lautet wie folgt:

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);
} );

Das Obige ist das, was ich für alle zusammengestellt habe Zukunft.

Verwandte Artikel:

So implementieren Sie die Doppelfarben-Ballfunktion in JS

So implementieren Sie den Schneeanimationseffekt in jQuery

Wie erreicht man den Pulldown-Aktualisierungs- und Pullup-Ladeeffekt der Liste im WeChat-Applet?

Das obige ist der detaillierte Inhalt vonSo implementieren Sie Baidu-Statistiken mit Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!