menu修改

src/layout/index/native.vue

@@ -2,7 +2,7 @@
   <div id="native">
     <el-row>
       <el-col :span="24">
-        <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal" @select="handleSelect"
+        <el-menu :default-active="activeIndex2" class="el-menu-demo" mode="horizontal"
                background-color="#336699" text-color="#fff" active-text-color="#fff" style="height:40px;" :router="true">
         <el-menu-item index="/">首页</el-menu-item>
         <!-- 循环菜单↓ -->
@@ -52,37 +52,6 @@ export default {
     ...mapState(['menu']),
   },
   methods: {
-    ...mapMutations(['setSubMenu']),
-    handleSelect(path, arr) {
-      let res = this.menu.filter(fil => {
-          let is_this = this.checkChildrens(fil, path);
-          return is_this;
-        });
-        if (res.length > 0) {
-          let this_menu = res[0];
-          if (this_menu.children.length > 0) {
-            this_menu = this_menu.children;
-          }
-          this.setSubMenu(this_menu);
-        }
-    },
-    checkChildrens(fil, path){
-      let is_this = false;
-      if (fil.children) {
-        for (const item of fil.children) {
-          if (item.path === path) {
-            is_this = true;
-            break;
-          } else {
-            let res = this.checkChildrens(item, path);
-            if(res) {
-              is_this = true;
-              break;
-            }
-          }
-        }
-      }return is_this;
-    },
     turnTo(url) {
       window.open(url);
     },

src/layout/list/mainLeft.vue

@@ -1,38 +1,50 @@
 <template>
   <div id="mainLeft">
     <el-row>
-      <el-col :span="24" class="mainLeft">
-        <el-col :span="24" class="info" v-for="(item, index) in mainLeftList" :key="index" :type="item.type">
-          <el-link :underline="false">
-            <span class="title">{{item.title}}</span>
-          </el-link>
-        </el-col>
-      </el-col>
       <el-col :span="24">
-        <el-menu default-active="2" class="el-menu-vertical-demo">
-        <el-menu-item index="1">科技要闻</el-menu-item>
-        <el-menu-item index="2">学术资讯</el-menu-item>
-        <el-menu-item index="3">工作动态</el-menu-item>
-      </el-menu>
+        <el-menu :default-active="path" class="el-menu-vertical-demo" :router="true">
+          <template v-for="(item, index) in subMenu">
+            <el-submenu :index="`${index}`" :key="index" v-if="item.children">
+              <template slot="title">
+                  {{ item.title }}
+                </template>
+                <template v-for="(sec,secIndex) in item.children">
+                  <el-menu-item :index="sec.path" :key="secIndex+'sec'" v-if="sec.type !== 'url'">{{ sec.title }}</el-menu-item>
+                  <el-menu-item :index="``" :key="secIndex+'sec'" @click="turnTo(sec.url)" v-else> {{ sec.title }}</el-menu-item>
+                </template>
+            </el-submenu>
+            <el-menu-item :index="item.path" :key="index" v-else-if="item.type === 'content'||item.type==='column'">{{ item.title }}</el-menu-item>
+            <el-menu-item :index="`${index}-${subIndex}`" :key="index" @click="turnTo(item.url)" v-else> {{ item.title }}</el-menu-item>
+          </template>
+        </el-menu>
       </el-col>
     </el-row>
   </div>
 </template>
 
 <script>
-import { mapActions, mapState } from 'vuex';
+import { mapActions, mapState,mapMutations } from 'vuex';
 export default {
   name: 'mainLeft',
-  props: {
-    mainLeftList: null,
-  },
+  props: {},
   components: {},
   data: () => ({}),
-  created() {},
+  created() {this.getSubMenu()},
+  watch:{
+    path: 'getSubMenu',
+  },
   computed: {
     ...mapState(['subMenu']),
+    path(){
+      return this.$route.path;
+    },
+  },
+  methods: {
+    ...mapMutations(['setSubMenu']),
+    getSubMenu(){
+      this.setSubMenu(this.path);
+    },
   },
-  methods: {},
 };
 </script>