fix: Vue 3.0 路由mode判断错误的问题

Author: chengpeiquan

README.md

@@ -46,7 +46,7 @@ npm install vue-baidu-analytics --save-dev
 参数|是否必填|参数类型|参数说明
 :-:|:-:|:-:|-
 router|是|object|Vue Router，本插件基于路由使用
-siteIdList|是|object Array|百度统计的站点id列表，item为站点id<br>只有一个站点需要上报就保留一个item即可
+siteIdList|是|string[]|百度统计的站点id列表，item为站点id<br>只有一个站点需要上报就保留一个item即可
 isDebug|否|boolean|是否开启debug模式，默认 `false`<br>开启后会在控制台打印上报信息，**上线前记得关闭**
 
 ## 使用

dist/modules/getRouterMode.d.ts

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

dist/vue-baidu-analytics.js

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

dist/vue-baidu-analytics.js.map

@@ -1,5 +1,6 @@
 import PushBAIDU from '@m/pushBAIDU'
 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) => {
+    // 根据Vue版本获取路由模式
+    const ROUTER_MODE: string = getRouterMode(VUE_VERSION, router);
+    
+    // 获取页面的url信息
     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}`;
 
+    // 根据路由模式生成要上报的链接
+    const PAGE_URL = ROUTER_MODE === 'hash' ? `${PAGE_PATH}/#${to.fullPath}` : `${PAGE_PATH}${to.fullPath}`;
+    
+    // 上报数据
     pushBAIDU.pv(PAGE_URL);
   });
 }

dist/vue-baidu-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;