增加路由搜索功能 左侧菜单栏增加图标

Author: pixel

web/src/store/module/router.js

@@ -2,9 +2,12 @@ import { asyncRouterHandle } from '@/utils/asyncRouter';
 
 import { asyncMenu } from '@/api/menu'
 
-
+const routerList = []
 const formatRouter = (routes) => {
     routes && routes.map(item => {
+        if ((!item.children || item.children.every(ch => ch.hidden)) && item.name != '404') {
+            routerList.push({ label: item.meta.title, value: item.name })
+        }
         item.meta.hidden = item.hidden
         if (item.children && item.children.length > 0) {
             formatRouter(item.children)
@@ -15,9 +18,13 @@ const formatRouter = (routes) => {
 export const router = {
     namespaced: true,
     state: {
-        asyncRouters: []
+        asyncRouters: [],
+        routerList: routerList,
     },
     mutations: {
+        setRouterList(state, routerList) {
+            state.routerList = routerList
+        },
         // 设置动态路由
         setAsyncRouter(state, asyncRouters) {
             state.asyncRouters = asyncRouters
@@ -55,13 +62,17 @@ export const router = {
             })
             asyncRouterHandle(baseRouter)
             commit('setAsyncRouter', baseRouter)
+            commit('setRouterList', routerList)
             return true
         }
     },
     getters: {
         // 获取动态路由
         asyncRouters(state) {
             return state.asyncRouters
+        },
+        routerList(state) {
+            return state.routerList
         }
     }
 }

web/src/view/layout/aside/historyComponent/history.vue

@@ -36,15 +36,15 @@ export default {
       left: 0,
       top: 0,
       isCollapse: false,
-      isMobile:false,
+      isMobile: false,
       rightActive: ''
     }
   },
   created() {
-    this.$bus.on('mobile',(isMobile)=>{
+    this.$bus.on('mobile', isMobile => {
       this.isMobile = isMobile
     })
-    this.$bus.on('collapse',(isCollapse)=>{
+    this.$bus.on('collapse', isCollapse => {
       this.isCollapse = isCollapse
     })
     const initHistorys = [
@@ -60,7 +60,7 @@ export default {
     this.setTab(this.$route)
   },
 
-  beforeDestroy(){
+  beforeDestroy() {
     this.$bus.off('collapse')
     this.$bus.off('mobile')
   },
@@ -77,7 +77,7 @@ export default {
         } else {
           width = 220
         }
-        if(this.isMobile){
+        if (this.isMobile) {
           width = 0
         }
         this.left = e.clientX - width
@@ -118,7 +118,7 @@ export default {
       const activeIndex = this.historys.findIndex(
         item => item.name == this.activeValue
       )
-      this.historys.splice(leftIndex+1, this.historys.length)
+      this.historys.splice(leftIndex + 1, this.historys.length)
       if (leftIndex < activeIndex) {
         this.$router.push({ name: this.rightActive })
       }
@@ -202,4 +202,9 @@ export default {
   background: #f2f2f2;
   cursor: pointer;
 }
+.router-history {
+  background: #fff;
+  padding: 0 6px;
+  border-top: 1px solid #dcdcdc;
+}
 </style>