up

package.json

@@ -26,6 +26,7 @@
     "path-to-regexp": "2.4.0",
     "view-design": "^4.7.0",
     "vue": "2.6.10",
+    "vue-matomo": "^4.2.0",
     "vue-router": "3.0.6",
     "vuex": "3.1.0",
     "wangeditor": "^4.7.12"

public/index.html

@@ -13,5 +13,8 @@
     </noscript>
     <div id="app"></div>
     <!-- built files will be auto injected -->
+    <!-- Matomo -->
+   
+    <!-- End Matomo Code -->
   </body>
 </html>

src/App.vue

@@ -5,8 +5,24 @@
 </template>
 
 <script>
-import "./assets/css/common.less";
-export default {
-  name: 'App'
-}
+  import {
+    mapGetters
+  } from 'vuex'
+  import "./assets/css/common.less";
+  export default {
+    name: 'App',
+    computed: {
+      ...mapGetters([
+        'name'
+      ])
+    },
+    watch: {
+      $route(to, from) {
+        let locationHash = window.location.hash;
+
+        this.$matomo.setCustomUrl(locationHash.replace(/#/g, ''));
+        this.$matomo.trackPageView(to.meta.title) //设置页面名称
+      }
+    }
+  }
 </script>

src/layout/noLayout.vue

@@ -0,0 +1,47 @@
+<template>
+  <section class="app-main">
+    <transition name="fade-transform" mode="out-in">
+      <router-view :key="key" />
+    </transition>
+  </section>
+</template>
+
+<script>
+import Breadcrumb from '@/components/Breadcrumb'
+export default {
+  components: {
+    Breadcrumb
+  },
+  name: 'AppMain',
+  computed: {
+    key() {
+      return this.$route.path
+    }
+  }
+}
+</script>
+
+<style scoped>
+.app-main {
+  /*50 = navbar  */
+  min-height: calc(100vh - 30px);
+  width: 100%;
+  position: relative;
+  overflow: hidden;
+}
+.fixed-header+.app-main {
+  padding-top: 50px;
+}
+</style>
+
+<style lang="scss">
+// fix css style bug in open el-dialog
+.el-popup-parent--hidden {
+  .fixed-header {
+    padding-right: 15px;
+  }
+}
+.breadcrumb-container {
+    margin-left: 20px !important;
+  }
+</style>

src/main.js

@@ -46,3 +46,23 @@ new Vue({
   store,
   render: h => h(App)
 })
+
+import VueMatomo from 'vue-matomo'
+
+Vue.use(VueMatomo, {
+  host: 'http://192.168.60.99:9000/', // 这里配置你自己的piwik服务器地址和网站ID
+  siteId: 1,//siteId值
+  // 根据router自动注册
+  router: router,
+  // // 是否需要在发送追踪信息之前请求许可
+  // // 默认false
+  requireConsent: false,
+  enableLinkTracking: true,
+  // // 是否追踪初始页面
+  // // 默认true
+  trackInitialView: false,
+  // // 最终的追踪js文件名
+  // // 默认 'piwik'
+  trackerFileName: 'matomo',
+  debug: false
+});

src/store/modules/permission.js

@@ -24,10 +24,23 @@ function hasPermission(roles, route) {
  * @returns
  */
 export const loadView = (view) => { 
+  //console.log('loadView');
   return (resolve) => require([`@/views${view}`], resolve);
 }
 
 
+const componentHandler = (item) => {
+  //return path === '#'|| path == ''  ? Layout : loadView(path)
+  if(item.url === '#' || item.url === ''){
+    return Layout
+  }
+  if(item.path&&item.path.includes('#') && item.path !== '#'){
+    console.log('@/layout/noLayout');
+    return ()=>import('@/layout/noLayout')
+  }
+  return loadView(item.url)
+}
+
 /**
  * Filter asynchronous routing tables by recursion
  * @param routes asyncRoutes
@@ -79,13 +92,16 @@ export function generaMenu(routes, data) {
       })
     } else {
       var path = item.url;
-      if (item.path != "null" && item.path != null && item.path != "") {
+      if (item.path != "null" && item.path != null && item.path != ""&& item.path != "##") {
         path = item.path
       }
+      console.log(path)
       const menu = {
-        path: (path === '#' ? item.id + '_key' : path),
+
+        path: (path.includes('#') ? item.id + '_key' : path),
         redirect: (item.children.length > 0 ? "noRedirect" : ""),
-        component: item.url === '#' ? Layout : loadView(item.url),
+        //component: item.url === '#' ? Layout : loadView(item.url),
+        component:componentHandler(item),
         // hidden: true,
         children: [],
         name: 'menu_' + item.id,