Merge pull request #7 from chengpeiquan/develop

Develop

Author: chengpeiquan

README.md

@@ -1,7 +1,7 @@
 vue-cnzz-analytics 使用说明
 ===
 
-基于Vue开发的CNZZ统计插件（友盟统计），可以在 `Vue-CLI脚手架项目` 或者 `引入了Vue相关CDN的普通页面`，以及 `VuePress`项目上使用，使用本插件的项目需要引入 `Vue Router`。
+基于Vue开发的CNZZ统计插件（友盟统计），可以在 `Vue-CLI脚手架项目` 或者 `引入了Vue相关CDN的普通页面`，以及 `VuePress` 项目上使用，使用本插件的项目需要引入 `Vue Router`。
 
 > @v2.0版本更新：<br>最新版支持 Vue 3.x，同时兼容 Vue 2.x 使用，具体使用方法请看下方说明及demo。<br>对Vue 3.0感兴趣，但还在观望的同学，欢迎阅读我踩坑总结的：[Vue 3.0 学习教程](https://vue3.chengpeiquan.com/) （持续更新ing）
 
@@ -46,7 +46,7 @@ npm install vue-cnzz-analytics --save-dev
 参数|是否必填|参数类型|参数说明
 :-:|:-:|:-:|-
 router|是|object|Vue Router，本插件基于路由使用
-siteIdList|是|object Array|CNZZ统计的站点id列表，item为站点id<br>只有一个站点需要上报就保留一个item即可
+siteIdList|是|number[]|CNZZ统计的站点id列表，item为站点id<br>只有一个站点需要上报就保留一个item即可
 isDebug|否|boolean|是否开启debug模式，默认 `false`<br>开启后会在控制台打印上报信息，**上线前记得关闭**
 
 ## 使用
@@ -119,7 +119,9 @@ export default ({ Vue, router }) => {
   Vue.use(cnzzAnalytics, {
     router: router,
     siteIdList: [
-      11111
+      11111,
+      22222,
+      33333
     ],
     isDebug: false
   });

dist/modules/getRouterMode.d.ts

@@ -0,0 +1,2 @@
+declare const getRouterMode: (vueVersion: number, router: any) => string;
+export default getRouterMode;

dist/vue-cnzz-analytics.js

@@ -1,6 +1,6 @@
 {
   "name": "vue-cnzz-analytics",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "A data collection tool that supports reporting of single-page application data built by Vue 3.0 & 2.0 & VuePress, based on cnzz statistics.",
   "main": "dist/vue-cnzz-analytics.min.js",
   "types": "vue-cnzz-analytics.d.ts",

dist/vue-cnzz-analytics.js.map

@@ -1,5 +1,6 @@
 import PushCNZZ from '@m/pushCNZZ'
 import getVueVersion from '@m/getVueVersion'
+import getRouterMode from '@m/getRouterMode'
 
 /** 
  * 定义插件
@@ -50,10 +51,17 @@ export default function install (Vue: Vue, { router, siteIdList, isDebug = false
    * 路由切换时执行PV上报
    */
   router.afterEach( (to: To) => {
-    const PAGE_PATH_DIR_COUNT = window.location.pathname.split('/').length;
-    const PAGE_PATH = window.location.pathname.split('/').slice(0, PAGE_PATH_DIR_COUNT - 1).join('/');
-    const PAGE_URL = router.mode === 'hash' ? `${PAGE_PATH}/#${to.fullPath}` : `${PAGE_PATH}${to.fullPath}`;
+    // 根据Vue版本获取路由模式
+    const ROUTER_MODE: string = getRouterMode(VUE_VERSION, router);
+    
+    // 获取页面的url信息
+    const PAGE_PATH_DIR_COUNT: number = window.location.pathname.split('/').length;
+    const PAGE_PATH: string = window.location.pathname.split('/').slice(0, PAGE_PATH_DIR_COUNT - 1).join('/');
+    
+    // 根据路由模式生成要上报的链接
+    const PAGE_URL: string = ROUTER_MODE === 'hash' ? `${PAGE_PATH}/#${to.fullPath}` : `${PAGE_PATH}${to.fullPath}`;
 
+    // 上报数据
     pushCNZZ.pv(PAGE_URL);
   });
 }

dist/vue-cnzz-analytics.min.js

@@ -0,0 +1,26 @@
+/** 
+ * 获取Vue的版本
+ * @param {number} vueVersion - vue版本号，2=Vue2.x, 3=Vue3.x
+ * @param {object} router - vue路由
+ * @return hash=hash模式、history=history模式
+ */
+const getRouterMode = (vueVersion: number, router: any): string => {
+  let mode: string = 'history';
+
+  // 2.x直接读取mode即可
+  if ( vueVersion === 2 ) {
+    mode = router.mode;
+  }
+
+  // 3.x需要判断一下
+  if ( vueVersion === 3 ) {
+    const BASE: string = router.options.history.base || '';
+    if ( BASE.includes('#') ) {
+      mode = 'hash';
+    }
+  }
+  
+  return mode;
+}
+
+export default getRouterMode;