左侧菜单高亮修改

src/components/common/Menu.vue

@@ -1,55 +1,62 @@
 <template>
-    <el-menu :router="true"
-            :default-active="defaultMItem"
-            class="el-menu-vertical-demo">
-        <template v-for="(item,index) in data">
-            <el-menu-item :index="'/'+role+'/'+item.code" v-if="item.subMenuList.length==0">
-                <!-- <i v-bind:class="icons[item.code]"></i> -->
-                <i class="el-icon-location"></i>
-                <span slot="title">{{item.name}}</span>
-            </el-menu-item>
-            <el-submenu v-if="item.subMenuList.length>0" :index="index+1+''">
-                <template slot="title">
-                    <i class="el-icon-location"></i>
-                    <span>{{item.name}}</span>
-                </template>
-                <el-menu-item v-for="(sub,i) in item.subMenuList" :index="'/'+role+'/'+sub.code"><p>{{sub.name}}</p></el-menu-item>
-            </el-submenu>
+  <el-menu :router="true" :default-active="defaultActive" class="el-menu-vertical-demo">
+    <template v-for="(item,index) in data">
+      <el-menu-item :index="'/'+role+'/'+item.code" v-if="item.subMenuList.length==0">
+        <!-- <i v-bind:class="icons[item.code]"></i> -->
+        <i class="el-icon-location"></i>
+        <span slot="title">{{item.name}}</span>
+      </el-menu-item>
+      <el-submenu v-if="item.subMenuList.length>0" :index="index+1+''">
+        <template slot="title">
+          <i class="el-icon-location"></i>
+          <span>{{item.name}}</span>
         </template>
-    </el-menu>
+        <el-menu-item v-for="(sub,i) in item.subMenuList" :index="'/'+role+'/'+sub.code">
+          <p>{{sub.name}}</p>
+        </el-menu-item>
+      </el-submenu>
+    </template>
+  </el-menu>
 </template>
 
 <script>
-  import config from '@api/config.js';
+import config from '@api/config.js';
 
-  export default {
-    name: 'lt-menu',
-    props: ['data', 'role'],
-    data: function () {
-      return {
-        icons: config.menuIconList
-      }
-    },
-    computed:{
-        defaultMItem:function () {
-            let route = this.$route.path;
-            return route;
-        }
-    },
-    methods: {
+export default {
+  name: 'lt-menu',
+  props: ['data', 'role'],
+  data: function() {
+    return {
+      icons: config.menuIconList,
+      defaultActive: ''
+    };
+  },
+  computed: {
+    defaultMItem: function() {
+      let route = this.$route.path;
+      return route;
     }
-  }
+  },
+  watch: {
+    $route(to, from) {}
+  },
+  created() {
+    console.log(this.$route,'this.$route');
+    this.defaultActive = this.$route.fullPath;
+  },
+  methods: {}
+};
 </script>
 
 <style lang="less" scoped>
-    .el-menu-item p{
-        display: table-cell;
-        vertical-align: middle;
-        white-space: normal;
-        line-height: 20px;
-        height: 50px;
-    }
-  /*.el-menu-vertical-demo {
+.el-menu-item p {
+  display: table-cell;
+  vertical-align: middle;
+  white-space: normal;
+  line-height: 20px;
+  height: 50px;
+}
+/*.el-menu-vertical-demo {
     min-width: 300px;
   }*/
 </style>