vue项目中加入cnzz站长统计

中午领导发来一段代码，让加在前几天上线的一个项目中，代码如下：

<script type="text/javascript">document.write(unescape("%3Cspan
    id='cnzz_stat_icon_1275628737'%3E%3C/span%3E%3Cscript
    src='https://s23.cnzz.com/z_stat.php%3Fid%3D1275628737'
    type='text/javascript'%3E%3C/script%3E"));</script>
复制代码

我刚拿到代码也是一脸懵逼，仔细一看，这他喵的不就是一个script标签嘛，好办，直接加在html代码中，因为是vue项目，只有一个html，那就是public中的index.html，我正准备加的时候，领导又说，这个只需要加在某一个页面即可（这里就叫他A页面），其他页面都不需要，因为这是用来统计那一个页面的流量数据的。

我和领导说，这代码只要一加上去，全部页面都会被统计，因为vue项目是单页面应用，有且只有一个html页面。领导表示无奈，我表示哈哈，试一下吧，遂上网搜了一下站长统计，cnzz之类的。最后研究一通，以下是我的研究成果。（ps：主要参考了 vue单页面中添加cnzz统计 和 API技术文档）

主要操作是在app.vue中完成的，首先定义一个初始化cnzz的方法。

export default {
  data(){
    return {
      src: 'https://s23.cnzz.com/z_stat.php?id=1275628737',
      id: 'cnzz_stat_icon_1275628737'
    }
  },
  mounted(){
        this.initCNZZ()
  },
  methods: {
    initCNZZ() {
        //添加脚本
        const script = document.createElement('script')
        script.src = this.src
        script.id = this.id
        script.language = 'JavaScript'
        document.body.appendChild(script)
    }
  },
  watch: {
      '$route': {
        handler(to, from) {
          console.log('to - - -  ', to)
          console.log('from - - -  ', from)
          setTimeout(() => {
              if (window._czc) {
                const location = window.location
                const contentUrl = location.pathname + location.hash
                const refererUrl = '/'
                console.log('location - - -    ', location)
                console.log('contentUrl - - -    ', contentUrl)
                window._czc.push(['_setAutoPageview', false])
                window._czc.push(['_trackPageview', contentUrl, refererUrl])
              }
          }, 300)
        },
        immediate: true
      }
  }
}
复制代码

这里的window._czc.push(['_setAutoPageview', false])是为了将该页面的自动PV统计关闭，防止页面的流量被统计双倍。

真正开启流量统计的是这段window._czc.push(['_trackPageview', contentUrl, refererUrl])

好了之后看cnzz后台，会有记录出现，就像这样的：

其实可以看到，拦截的页面url也包含了路由地址，所以，在app.vue中，我们不需要再针对单独的路由设置流量监控了，只需要再后台筛选即可。哦，对了，上面领导发我的代码是编码过的，我用unescape解码后再把src和id单独拎出来做的初始化，具体项目视具体情况而定。第一次玩cnzz肯定有不完美的地方，求高手赐教，虚心学习，谢谢?