Add Baidu statistics code to a single-page vue application (for test purposes) and vue code

Add Baidu statistics code to a single-page vue application (for test purposes) and vue code

In this way, the ingress file is inserted globally, and each page is available. This involves a problem, Vue. the js Project is a single-page application. Every time a user browses a website, the page will not be refreshed when accessing the inner page, which means that Baidu Statistics Code will not be triggered; therefore, the result displayed in the Baidu statistics background is that only the traffic at the webpage portal is counted, but the access traffic on the inner page is not counted.

Solution

In main. call the afterEach method of vue-router in the js file and add the statistical code to this method. In this way, the statistical code is executed every time the router changes, the Code is as follows:

Router. afterEach (to, from, next) =>{ setTimeout () =>{ var _ hmt = _ hmt | []; (function () {// remove the last inserted code document before each execution. 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 );});

Summary

The above is a small version of the vue single-page application plus Baidu statistics code, I hope to help you, if you have any questions, please leave a message, the small series will reply to you in a timely manner. Thank you very much for your support for the help House website!