完成标签导航本地存储

package-lock.json

@@ -164,7 +164,8 @@
       "version": "1.1.1",
       "resolved": "https://registry.npmjs.org/abbrev/-/abbrev-1.1.1.tgz",
       "integrity": "sha512-nne9/IiQ/hzIhY6pdDnbBtz7DjPTKrY00P/zvPSm5pOFkl6xuGrGnXn/VtTNNfNtAfZ9/1RtehkszU9qcTii0Q==",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "accepts": {
       "version": "1.3.3",
@@ -431,6 +432,7 @@
       "resolved": "https://registry.npmjs.org/are-we-there-yet/-/are-we-there-yet-1.1.4.tgz",
       "integrity": "sha1-u13KOCu5TwXhUZQ3PRb9O6HKEQ0=",
       "dev": true,
+      "optional": true,
       "requires": {
         "delegates": "1.0.0",
         "readable-stream": "2.3.6"
@@ -3238,7 +3240,8 @@
       "version": "0.4.2",
       "resolved": "https://registry.npmjs.org/deep-extend/-/deep-extend-0.4.2.tgz",
       "integrity": "sha1-SLaZwn4zS/ifEIkr5DL25MfTSn8=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "deep-is": {
       "version": "0.1.3",
@@ -3356,7 +3359,8 @@
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/delegates/-/delegates-1.0.0.tgz",
       "integrity": "sha1-hMbhWbgZBP3KWaDvRM2HDTElD5o=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "depd": {
       "version": "1.1.2",
@@ -3393,7 +3397,8 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/detect-libc/-/detect-libc-1.0.3.tgz",
       "integrity": "sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "detect-node": {
       "version": "2.0.3",
@@ -5204,6 +5209,7 @@
       "resolved": "https://registry.npmjs.org/fs-minipass/-/fs-minipass-1.2.5.tgz",
       "integrity": "sha512-JhBl0skXjUPCFH7x6x61gQxrKyXsxB5gcgePLZCwfyCGGsTISMoIeObbrvVeP6Xmyaudw4TT43qV2Gz+iyd2oQ==",
       "dev": true,
+      "optional": true,
       "requires": {
         "minipass": "2.2.4"
       }
@@ -5231,6 +5237,7 @@
       "resolved": "https://registry.npmjs.org/fsevents/-/fsevents-1.2.0.tgz",
       "integrity": "sha512-ROrBIbmw4ulxmQTwYAAGyN/0xgIOAFd6gX/K3F1aGLP/K5KxkubrlGISMV5EEWEB7qtiEdE0HpaqvMMHR+Ib6w==",
       "dev": true,
+      "optional": true,
       "requires": {
         "nan": "2.10.0",
         "node-pre-gyp": "0.9.1"
@@ -5985,6 +5992,7 @@
       "resolved": "https://registry.npmjs.org/gauge/-/gauge-2.7.4.tgz",
       "integrity": "sha1-LANAXHU4w51+s3sxcCLjJfsBi/c=",
       "dev": true,
+      "optional": true,
       "requires": {
         "aproba": "1.2.0",
         "console-control-strings": "1.1.0",
@@ -6001,6 +6009,7 @@
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "1.0.1"
           }
@@ -6010,6 +6019,7 @@
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "1.1.0",
             "is-fullwidth-code-point": "1.0.0",
@@ -6361,7 +6371,8 @@
       "version": "2.0.1",
       "resolved": "https://registry.npmjs.org/has-unicode/-/has-unicode-2.0.1.tgz",
       "integrity": "sha1-4Ob+aijPUROIVeCG0Wkedx3iqLk=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "has-value": {
       "version": "1.0.0",
@@ -6869,6 +6880,7 @@
       "resolved": "https://registry.npmjs.org/ignore-walk/-/ignore-walk-3.0.1.tgz",
       "integrity": "sha512-DTVlMx3IYPe0/JJcYP7Gxg7ttZZu3IInhuEhbchuqneY9wWe5Ojy2mXLBaQFUQmo0AW2r3qG7m1mg86js+gnlQ==",
       "dev": true,
+      "optional": true,
       "requires": {
         "minimatch": "3.0.4"
       }
@@ -6937,7 +6949,8 @@
       "version": "1.3.5",
       "resolved": "https://registry.npmjs.org/ini/-/ini-1.3.5.tgz",
       "integrity": "sha512-RZY5huIKCMRWDUqZlEi72f/lmXKMvuszcMBduliQ3nnWbx9X/ZBQO7DijMEYS9EhHBb2qacRUMtC7svLwe0lcw==",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "inject-loader": {
       "version": "3.0.1",
@@ -7477,9 +7490,9 @@
       }
     },
     "iview": {
-      "version": "2.13.1",
+      "version": "2.14.0-rc.1",
-      "resolved": "https://registry.npmjs.org/iview/-/iview-2.13.1.tgz",
+      "resolved": "https://registry.npmjs.org/iview/-/iview-2.14.0-rc.1.tgz",
-      "integrity": "sha512-7XwHnEfMnLuvKbzFTnbMPRKEwArhRu1HDzhc0WVCwQhqrhc/JqxJJuv9r9ndzfhm7ARGcsKSF/lxtnwadmLqTg==",
+      "integrity": "sha512-9el7yiJFKtCOVm5qmi34RkMxBCnBc+MBo47ka0BE3+pqlWZ/NM+WIhXuAN3e/c8YdXbhc0DQ9ZM322GxhdPovQ==",
       "requires": {
         "async-validator": "1.8.2",
         "deepmerge": "2.1.0",
@@ -7487,7 +7500,8 @@
         "js-calendar": "1.2.3",
         "lodash.throttle": "4.1.1",
         "popper.js": "1.14.3",
-        "tinycolor2": "1.4.1"
+        "tinycolor2": "1.4.1",
+        "v-click-outside-x": "2.4.0"
       }
     },
     "iview-area": {
@@ -7498,6 +7512,22 @@
         "area-data": "1.0.0",
         "iview": "2.13.1",
         "vue": "2.5.16"
+      },
+      "dependencies": {
+        "iview": {
+          "version": "2.13.1",
+          "resolved": "https://registry.npmjs.org/iview/-/iview-2.13.1.tgz",
+          "integrity": "sha512-7XwHnEfMnLuvKbzFTnbMPRKEwArhRu1HDzhc0WVCwQhqrhc/JqxJJuv9r9ndzfhm7ARGcsKSF/lxtnwadmLqTg==",
+          "requires": {
+            "async-validator": "1.8.2",
+            "deepmerge": "2.1.0",
+            "element-resize-detector": "1.1.14",
+            "js-calendar": "1.2.3",
+            "lodash.throttle": "4.1.1",
+            "popper.js": "1.14.3",
+            "tinycolor2": "1.4.1"
+          }
+        }
       }
     },
     "js-base64": {
@@ -8517,6 +8547,7 @@
       "resolved": "https://registry.npmjs.org/minizlib/-/minizlib-1.1.0.tgz",
       "integrity": "sha512-4T6Ur/GctZ27nHfpt9THOdRZNgyJ9FZchYO1ceg5S8Q3DNLCKYy44nCZzgCJgcvx2UM8czmqak5BCxJMrq37lA==",
       "dev": true,
+      "optional": true,
       "requires": {
         "minipass": "2.2.4"
       }
@@ -8778,7 +8809,8 @@
       "version": "2.10.0",
       "resolved": "https://registry.npmjs.org/nan/-/nan-2.10.0.tgz",
       "integrity": "sha512-bAdJv7fBLhWC+/Bls0Oza+mvTaNQtP+1RyhhhvD95pgUJz6XM5IzgmxOkItJ9tkoCiplvAnXI1tNmmUD/eScyA==",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "nanomatch": {
       "version": "1.2.9",
@@ -8811,6 +8843,7 @@
       "resolved": "https://registry.npmjs.org/needle/-/needle-2.2.0.tgz",
       "integrity": "sha512-eFagy6c+TYayorXw/qtAdSvaUpEbBsDwDyxYFgLZ0lTojfH7K+OdBqAF7TAFwDokJaGpubpSGG0wO3iC0XPi8w==",
       "dev": true,
+      "optional": true,
       "requires": {
         "debug": "2.6.9",
         "iconv-lite": "0.4.21",
@@ -8822,6 +8855,7 @@
           "resolved": "https://registry.npmjs.org/debug/-/debug-2.6.9.tgz",
           "integrity": "sha512-bC7ElrdJaJnPbAP+1EotYvqZsb3ecl5wi6Bfi6BJTUcNowp6cvspg0jXznRTKDjm/E7AdgFBVeAPVMNcKGsHMA==",
           "dev": true,
+          "optional": true,
           "requires": {
             "ms": "2.0.0"
           }
@@ -8971,6 +9005,7 @@
       "resolved": "https://registry.npmjs.org/node-pre-gyp/-/node-pre-gyp-0.9.1.tgz",
       "integrity": "sha1-8RwHUW3ZL4cZnbx+GDjqt81WyeA=",
       "dev": true,
+      "optional": true,
       "requires": {
         "detect-libc": "1.0.3",
         "mkdirp": "0.5.1",
@@ -8989,6 +9024,7 @@
       "resolved": "https://registry.npmjs.org/nopt/-/nopt-4.0.1.tgz",
       "integrity": "sha1-0NRoWv1UFRk8jHUFYC0NF81kR00=",
       "dev": true,
+      "optional": true,
       "requires": {
         "abbrev": "1.1.1",
         "osenv": "0.1.5"
@@ -9037,13 +9073,15 @@
       "version": "1.0.3",
       "resolved": "https://registry.npmjs.org/npm-bundled/-/npm-bundled-1.0.3.tgz",
       "integrity": "sha512-ByQ3oJ/5ETLyglU2+8dBObvhfWXX8dtPZDMePCahptliFX2iIuhyEszyFk401PZUNQH20vvdW5MLjJxkwU80Ow==",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "npm-packlist": {
       "version": "1.1.10",
       "resolved": "https://registry.npmjs.org/npm-packlist/-/npm-packlist-1.1.10.tgz",
       "integrity": "sha512-AQC0Dyhzn4EiYEfIUjCdMl0JJ61I2ER9ukf/sLxJUcZHfo+VyEfz2rMJgLZSS1v30OxPQe1cN0LZA1xbcaVfWA==",
       "dev": true,
+      "optional": true,
       "requires": {
         "ignore-walk": "3.0.1",
         "npm-bundled": "1.0.3"
@@ -9063,6 +9101,7 @@
       "resolved": "https://registry.npmjs.org/npmlog/-/npmlog-4.1.2.tgz",
       "integrity": "sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==",
       "dev": true,
+      "optional": true,
       "requires": {
         "are-we-there-yet": "1.1.4",
         "console-control-strings": "1.1.0",
@@ -9349,6 +9388,7 @@
       "resolved": "https://registry.npmjs.org/osenv/-/osenv-0.1.5.tgz",
       "integrity": "sha512-0CWcCECdMVc2Rw3U5w9ZjqX6ga6ubk1xDVKxtBQPK7wis/0F2r9T6k4ydGYhecl7YUBxBVxhL5oisPsNxAPe2g==",
       "dev": true,
+      "optional": true,
       "requires": {
         "os-homedir": "1.0.2",
         "os-tmpdir": "1.0.2"
@@ -12067,6 +12107,7 @@
       "resolved": "https://registry.npmjs.org/rc/-/rc-1.2.6.tgz",
       "integrity": "sha1-6xiYnG1PTxYsOZ953dKfODVWgJI=",
       "dev": true,
+      "optional": true,
       "requires": {
         "deep-extend": "0.4.2",
         "ini": "1.3.5",
@@ -12078,7 +12119,8 @@
           "version": "1.2.0",
           "resolved": "https://registry.npmjs.org/minimist/-/minimist-1.2.0.tgz",
           "integrity": "sha1-o1AIsg9BOD7sH7kU9M1d95omQoQ=",
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -13608,6 +13650,7 @@
       "resolved": "https://registry.npmjs.org/tar/-/tar-4.4.1.tgz",
       "integrity": "sha512-O+v1r9yN4tOsvl90p5HAP4AEqbYhx4036AGMm075fH9F8Qwi3oJ+v4u50FkT/KkvywNGtwkk0zRI+8eYm1X/xg==",
       "dev": true,
+      "optional": true,
       "requires": {
         "chownr": "1.0.1",
         "fs-minipass": "1.2.5",
@@ -13622,7 +13665,8 @@
           "version": "3.0.2",
           "resolved": "https://registry.npmjs.org/yallist/-/yallist-3.0.2.tgz",
           "integrity": "sha1-hFK0u36Dx8GI2AQcGoN8dz1ti7k=",
-          "dev": true
+          "dev": true,
+          "optional": true
         }
       }
     },
@@ -13884,7 +13928,8 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/uglify-to-browserify/-/uglify-to-browserify-1.0.2.tgz",
       "integrity": "sha1-bgkk1r2mta/jSeOabWMoUKD4grc=",
-      "dev": true
+      "dev": true,
+      "optional": true
     },
     "uglifyjs-webpack-plugin": {
       "version": "1.2.5",
@@ -14223,6 +14268,11 @@
       "integrity": "sha512-jZnMwlb9Iku/O3smGWvZhauCf6cvvpKi4BKRiliS3cxnI+Gz9j5MEpTz2UFuXiKPJocb7gnsLHwiS05ige5BEA==",
       "dev": true
     },
+    "v-click-outside-x": {
+      "version": "2.4.0",
+      "resolved": "https://registry.npmjs.org/v-click-outside-x/-/v-click-outside-x-2.4.0.tgz",
+      "integrity": "sha512-xAouyFRaMDD074px+J3PoxhU5nGQsIj8yxXRYyFd0/PRhY1ob3F55L9mGsd35KzXkQteajEhap6SClaMB0MENg=="
+    },
     "validate-npm-package-license": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/validate-npm-package-license/-/validate-npm-package-license-3.0.3.tgz",
@@ -14954,6 +15004,7 @@
       "resolved": "https://registry.npmjs.org/wide-align/-/wide-align-1.1.2.tgz",
       "integrity": "sha512-ijDLlyQ7s6x1JgCLur53osjm/UXUYD9+0PbYKrBsYisYXzCxN+HC3mYDNy/dWdmf3AwqwU3CXwDCvsNgGK1S0w==",
       "dev": true,
+      "optional": true,
       "requires": {
         "string-width": "1.0.2"
       },
@@ -14963,6 +15014,7 @@
           "resolved": "https://registry.npmjs.org/is-fullwidth-code-point/-/is-fullwidth-code-point-1.0.0.tgz",
           "integrity": "sha1-754xOG8DGn8NZDr4L95QxFfvAMs=",
           "dev": true,
+          "optional": true,
           "requires": {
             "number-is-nan": "1.0.1"
           }
@@ -14972,6 +15024,7 @@
           "resolved": "https://registry.npmjs.org/string-width/-/string-width-1.0.2.tgz",
           "integrity": "sha1-EYvfW4zcUaKn5w0hHgfisLmxB9M=",
           "dev": true,
+          "optional": true,
           "requires": {
             "code-point-at": "1.1.0",
             "is-fullwidth-code-point": "1.0.0",

package.json

@@ -20,7 +20,7 @@
     "cropperjs": "^1.3.5",
     "echarts": "^4.0.4",
     "html2canvas": "^1.0.0-alpha.12",
-    "iview": "^2.13.1-rc.1",
+    "iview": "^2.14.0-rc.1",
     "iview-area": "^1.5.17",
     "js-cookie": "^2.2.0",
     "sortablejs": "^1.7.0",

src/components/main/side-menu/side-menu.vue

@@ -71,7 +71,7 @@ export default {
   watch: {
     activeName (name) {
       this.$nextTick(() => {
-        this.$refs.menu.updateActiveName()
+        this.$refs.menu.updateOpened()
       })
     },
     openNames (newNames) {

src/components/tags-nav/tags-nav.vue

@@ -87,7 +87,7 @@ export default {
         this.$emit('on-close', res)
       } else {
         // 关闭除当前页和home页的其他页
-        let res = this.list.filter(item => item.name === this.value || item.name === 'home')
+        let res = this.list.filter(item => item.name === this.value.name || item.name === 'home')
         this.$emit('on-close', res)
       }
     },

src/libs/util.js

@@ -65,3 +65,23 @@ export const getTagNavListFromLocalstorage = () => {
   const list = localStorage.tagNaveList
   return list ? JSON.parse(list) : []
 }
+
+/**
+ * @param {Array} routers 路由列表数组
+ * @description 用于找到路由列表中name为home的对象
+ */
+export const getHomeRoute = routers => {
+  let i = -1
+  let len = routers.length
+  let homeRoute = {}
+  while (++i < len) {
+    let item = routers[i]
+    if (item.children && item.children.length) {
+      let res = getHomeRoute(item.children)
+      if (res.name) return res
+    } else {
+      if (item.name === 'home') homeRoute = item
+    }
+  }
+  return homeRoute
+}

src/store/module/app.js

@@ -14,6 +14,13 @@ export default {
         state.tagNavList = [...list]
         setTagNavListInLocalstorage([...list])
       } else state.tagNavList = getTagNavListFromLocalstorage()
+    },
+    addTag (state, item, type = 'unshift') {
+      if (state.tagNavList.findIndex(tag => tag.name === item.name) < 0) {
+        if (type === 'push') state.tagNavList.push(item)
+        else state.tagNavList.unshift(item)
+        setTagNavListInLocalstorage([...state.tagNavList])
+      }
     }
   }
 }

src/store/module/routers.js

@@ -1,10 +1,11 @@
 import { getRouterReq } from '@/api/routers'
-import { getMenuByRouter } from '@/libs/util'
+import { getMenuByRouter, getHomeRoute } from '@/libs/util'
 import routers from '@/router/routers'
 export default {
   namespaced: true,
   state: {
-    routerList: []
+    routerList: [],
+    homeRoute: getHomeRoute(routers)
   },
   getters: {
     menuList: state => getMenuByRouter(routers)

src/view/main/main.vue

@@ -180,12 +180,16 @@ export default {
     ]),
     ...mapState('app', [
       'tagNavList'
+    ]),
+    ...mapState('routers', [
+      'homeRoute'
     ])
   },
   methods: {
     ...mapMutations('app', [
       'setBreadCrumb',
-      'setTagNavList'
+      'setTagNavList',
+      'addTag'
     ]),
     turnToPage (name) {
       this.$router.push({
@@ -196,9 +200,10 @@ export default {
       this.collapsed = state
     },
     getNewTagList (newRoute) {
+      const { name, path, meta } = newRoute
       let newList = [...this.tagNavList]
-      if (newList.findIndex(item => item.name === newRoute.name) >= 0) return newList
+      if (newList.findIndex(item => item.name === name) >= 0) return newList
-      else newList.push(newRoute)
+      else newList.push({ name, path, meta })
       return newList
     },
     handleClick (item) {
@@ -217,6 +222,7 @@ export default {
   mounted () {
     this.currentRoute = this.$route
     this.setTagNavList()
+    this.addTag(this.homeRoute)
     this.setBreadCrumb(this.$route.matched)
   }
 }