fix: 后退前进功能

src/App.vue

@@ -7,31 +7,6 @@
 import { storageKey } from '@/utils/constants'
 export default {
   name: 'App',
-  mounted () {
-    // 浏览器控制按钮前进后退触发函数
-    window.addEventListener('popstate', this.popstate, false)
-  },
-  unmounted () {
-    window.removeEventListener('popstate', this.popstate, false)
-  },
-  methods: {
-    popstate () {
-      const historyJSON = sessionStorage.getItem(storageKey.history)
-      if (history) {
-        const history = JSON.parse(historyJSON)
-        if (history.index > -1) {
-          history.index--
-        } else {
-          history.index = history.history.length - 3
-        }
-        sessionStorage.setItem(storageKey.history, JSON.stringify(history))
-        this.$router.push({
-          path: history.history[history.index].path,
-          query: history.history[history.index].query
-        })
-      }
-    }
-  },
   setup () {
     // 处理刷新后  $dayJs的时区变为默认的问题
     const timezone = localStorage.getItem(storageKey.sysTimezone) || ''

src/components/layout/Header.vue

@@ -287,7 +287,6 @@ export default {
       } else {
         result = breadcrumb ? [breadcrumb.parentName, breadcrumb.name] : []
       }
-      console.info(thirdMenu, fourthMenu, result)
       return result
     },
     showEntityTypeSelector () {
@@ -556,36 +555,32 @@ export default {
         if (menus[3]) {
           this.handleCurDrilldownTableConfig(this.breadcrumb[2], this.breadcrumb[3])
         }
-        /* this.$router.push({
+        this.$router.push({
           path: route,
           query: {
             t: +new Date()
           }
-        }) */
+        })
-        this.jumpAndCache(route, {})
       } else if (opeType === 3) {
-        /* this.$router.push({
+        this.$router.push({
-          query: { ...this.$route.query, fourthPanel: '' }
+          query: { ...this.$route.query, fourthPanel: '', t: +new Date() }
-        }) */
+        })
-        this.jumpAndCache(route, { ...this.$route.query, fourthPanel: '' })
       } else if (opeType != 4) {
-        this.jumpAndCache(route, { ...this.$route.query, fourthPanel: '', thirdPanel: '' })
+        this.$router.push({
-        /* this.$router.push({
+          query: { ...this.$route.query, fourthPanel: '', thirdPanel: '', t: +new Date() }
-          query: { ...this.$route.query, fourthPanel: '', thirdPanel: '' }
+        })
-        }) */
       }
       if (route === this.route) {
         this.refresh()
         return
       }
       if (route) {
-        /* this.$router.push({
+        this.$router.push({
           path: route,
           query: {
             t: +new Date()
           }
-        }) */
+        })
-        this.jumpAndCache(route, {})
       }
     },
     dropDownSearch () {

src/mixins/common.js

@@ -42,19 +42,6 @@ export default {
     },
     dateFormatByAppearance (date) {
       return dateFormatByAppearance(date)
-    },
-    jumpAndCache (path, query) {
-      query.t = new Date().getTime()
-      const historyJSON = sessionStorage.getItem(storageKey.history)
-      if (history) {
-        const history = JSON.parse(historyJSON)
-        history.index = -1
-        sessionStorage.setItem(storageKey.history, JSON.stringify(history))
-        this.$router.push({
-          path: path,
-          query: query
-        })
-      }
     }
   }
 }

src/permission.js

@@ -2,7 +2,7 @@ import router from './router'
 import store from './store'
 import { ElMessage } from 'element-plus'
 import { getPermission } from '@/utils/api'
-import { loadGeoData, setHistory } from '@/utils/tools'
+import { loadGeoData } from '@/utils/tools'
 import axios from 'axios'
 import { storageKey } from '@/utils/constants'
 import { loadI18n } from '@/i18n'
@@ -27,7 +27,6 @@ router.beforeEach(async (to, from, next) => {
     }
     // 加载权限
     if (permissionWhiteList.indexOf(to.path) !== -1) {
-      setHistory(to)
       next()
     } else {
       if (store.getters.menuList.length === 0) {
@@ -38,7 +37,6 @@ router.beforeEach(async (to, from, next) => {
       }
       if (to.path) {
         if (hasMenu(store.getters.menuList, to.path)) {
-          setHistory(to)
           next()
         } else {
           ElMessage.error('No access') // TODO 国际化

src/utils/tools.js

@@ -976,7 +976,7 @@ export function urlParamsHandler (url, oldParams, newParams, cleanOldParams) {
 }
 
 export function overwriteUrl (url) {
-  window.history.pushState('', '', url)
+  window.history.replaceState('', '', url)
 }
 
 /*
@@ -1005,15 +1005,3 @@ export function colorGradientCalculation (startColor, endColor, values) {
 export function colorHexToRgbArr (hex) {
   return [1, 3, 5].map((h) => parseInt(hex.substring(h, h + 2), 16))
 }
-
-export function setHistory (to) {
-  const historyJson = sessionStorage.getItem(storageKey.history)
-  const query = { ...to.query, t: new Date().getTime() }
-  if (historyJson) {
-    const history = JSON.parse(historyJson)
-    history.history.push({ path: to.path, query: query })
-    sessionStorage.setItem(storageKey.history, JSON.stringify(history))
-  } else {
-    sessionStorage.setItem(storageKey.history, JSON.stringify({ index: 0, history: [query] }))
-  }
-}

src/views/charts2/Panel.vue

@@ -85,13 +85,7 @@ export default {
       deep: true,
       immediate: true,
       handler (n) {
-        console.info(n)
         this.score = n
-        // const curOperationType = this.$store.getters.getTabOperationType
-        // const curOperationType = this.getUrlParam(this.curTabState.tabOperationType, '', true)
-        // if (curOperationType === operationType.thirdMenu) { // 点击的为第三级菜单
-        // this.score = n
-        // }
       }
     }
   },

src/views/charts2/charts/linkMonitor/LinkBlock.vue

@@ -327,22 +327,28 @@ export default {
     },
     drillLinkId (item) {
       const queryCondition = `common_egress_link_id = ${item.egressLinkId} AND common_ingress_link_id = ${item.ingressLinkId}`
-      this.jumpAndCache(this.$route.path, {
+      this.$router.push({
-        ...this.$route.query,
+        query: {
-        thirdPanel: drillDownPanelTypeMapping.linkMonitor,
+          ...this.$route.query,
-        thirdMenu: `Link ID: ${item.linkId}`,
+          thirdPanel: drillDownPanelTypeMapping.linkMonitor,
-        panelName: `Link ID: ${item.linkId}`,
+          thirdMenu: `Link ID: ${item.linkId}`,
-        queryCondition
+          panelName: `Link ID: ${item.linkId}`,
+          queryCondition,
+          t: +new Date()
+        }
       })
     },
     drillNextHop (item) {
       const queryCondition = `egress_link_direction = '${item.linkDirection}' AND ingress_link_direction = '${item.linkDirection}'`
-      this.jumpAndCache(this.$route.path, {
+      this.$router.push({
-        ...this.$route.query,
+        query: {
-        thirdPanel: drillDownPanelTypeMapping.linkMonitor,
+          ...this.$route.query,
-        thirdMenu: `Link ID: ${item.linkDirection}`,
+          thirdPanel: drillDownPanelTypeMapping.linkMonitor,
-        panelName: `Link ID: ${item.linkDirection}`,
+          thirdMenu: `Link ID: ${item.linkDirection}`,
-        queryCondition
+          panelName: `Link ID: ${item.linkDirection}`,
+          queryCondition,
+          t: +new Date()
+        }
       })
     }
   }

src/views/charts2/charts/networkOverview/NetworkOverviewApps.vue

@@ -398,7 +398,8 @@ export default {
           query: {
             ...this.$route.query,
             thirdPanel: curTable.panelIdOfThirdMenu ? curTable.panelIdOfThirdMenu : '',
-            fourthPanel: toPanel || ''
+            fourthPanel: toPanel || '',
+            t: +new Date()
           }
         })
       }

src/views/charts2/charts/networkOverview/NetworkOverviewTabs.vue

@@ -1158,7 +1158,6 @@ export default {
         })
       }
       this.saveUserLocalConfig()
-      console.log(this.drillDownTableConfigs)
       this.$store.getters.menuList.forEach(menu => {
         if (this.$_.isEmpty(menu.children) && menu.route) {
           if (this.$route.path === menu.route) {
@@ -1183,10 +1182,14 @@ export default {
         }
       })
       this.changeUrlTabState()
-      this.jumpAndCache(this.$route.path, {
+      this.$router.push({
-        ...this.$route.query,
+        path: this.$route.path,
-        thirdPanel: this.curTable.panelIdOfThirdMenu,
+        query: {
-        fourthPanel: toPanel
+          ...this.$route.query,
+          thirdPanel: this.curTable.panelIdOfThirdMenu,
+          fourthPanel: toPanel,
+          t: +new Date()
+        }
       })
     },
     handleSearchParams (columnValue) {
@@ -1550,7 +1553,6 @@ export default {
     async getUserLocalConfig () {
       const userLocalCongfig = await db[dbDrilldownTableConfig].get({ id: this.userId })
       if (userLocalCongfig) {
-        console.info(userLocalCongfig.config)
         return userLocalCongfig.config
       } else {
         return null

src/views/charts2/charts/npm/NpmAppCategoryScore.vue

@@ -326,7 +326,8 @@ export default {
         query: {
           ...this.$route.query,
           thirdPanel: curTable.panelIdOfThirdMenu ? curTable.panelIdOfThirdMenu : '',
-          fourthPanel: toPanel || ''
+          fourthPanel: toPanel || '',
+          t: +new Date()
         }
       })
     },

src/views/charts2/charts/npm/NpmIpMap.vue

@@ -116,7 +116,6 @@ export default {
                 t.score = 6
               }
             })
-            console.info(mapData)
             this.loadMarkerData(imageSeries, mapData)
           })
         }).finally(() => {