no message

Former-commit-id: 7b3fddd98d854f89e0357006e317cba47fd9be0f
Former-commit-id: 1b033b5f22388fc303b45d1b1f69504f582a34cc
Former-commit-id: e449874c389b784a04f7cd1e891a8a272f781f8d

src/components/core/MainLayout/_headerMenu.vue

@@ -26,32 +26,21 @@ export default {
     routeName () {
       return this.$route.name
     },
-    // 当前路由是否是顶级菜单
-    // 顶级菜单就是在顶栏里显示的菜单
-    // 二级菜单是在侧边栏显示的菜单
-    // 三级菜单是二级菜单展开的
-    routeIsTopLevel () {
-      return !!this.router.find(e => e.name === this.routeName)
-    },
     // 不管当前路由是不是顶级菜单 都返回这个路由所属的顶级菜单对象的name
     // 如果返回 undefined 代表这个路由不是在菜单里显示的路由
-    routeTopLevel () {
+    routeTopLevelName () {
-      if (this.routeIsTopLevel) {
+      if (this.router.find(e => e.name === this.routeName)) {
         return this.routeName
       } else {
-        const find = this.router.find(e => {
+        const find = this.router.find(e => e.children.find(child => child.name === this.routeName))
-          return e.children.find(child => {
-            return child.name === this.routeName
-          })
-        })
         return find ? find.name : undefined
       }
     },
     // 返回当前对象对应的顶级菜单 这个菜单可以在侧边栏菜单中直接使用
     // 如果返回 undefined 代表这个路由没有对应的一级路由也就没有菜单
     routeTopLevelMenu () {
-      if (this.routeTopLevel) {
+      if (this.routeTopLevelName) {
-        return this.menu.find(e => e.name === this.routeTopLevel).children
+        return this.menu.find(e => e.name === this.routeTopLevelName).children
       } else {
         return undefined
       }

src/components/core/MainLayout/_headerMenu_bak.vue

@@ -0,0 +1,88 @@
+<template>
+  <el-menu class="el-menu-demo" mode="horizontal">
+    <el-menu-item index="index" @click.native="active({name: 'index'})">首页</el-menu-item>
+    <el-menu-item
+      v-for="(item, index) in menu"
+      :key="index"
+      :index="String(index)"
+      @click.native="active(item)">
+      {{item.title}}
+    </el-menu-item>
+  </el-menu>
+</template>
+
+<script>
+import { mapMutations } from 'vuex'
+import { menu, router } from '@/router/menu/index.js'
+export default {
+  data () {
+    return {
+      menu,
+      router
+    }
+  },
+  computed: {
+    // 当前路由的name
+    routeName () {
+      return this.$route.name
+    },
+    // 当前路由是否是顶级菜单
+    // 顶级菜单就是在顶栏里显示的菜单
+    // 二级菜单是在侧边栏显示的菜单
+    // 三级菜单是二级菜单展开的
+    routeIsTopLevel () {
+      return !!this.router.find(e => e.name === this.routeName)
+    },
+    // 不管当前路由是不是顶级菜单 都返回这个路由所属的顶级菜单对象的name
+    // 如果返回 undefined 代表这个路由不是在菜单里显示的路由
+    routeTopLevel () {
+      if (this.routeIsTopLevel) {
+        return this.routeName
+      } else {
+        const find = this.router.find(e => {
+          return e.children.find(child => {
+            return child.name === this.routeName
+          })
+        })
+        return find ? find.name : undefined
+      }
+    },
+    // 返回当前对象对应的顶级菜单 这个菜单可以在侧边栏菜单中直接使用
+    // 如果返回 undefined 代表这个路由没有对应的一级路由也就没有菜单
+    routeTopLevelMenu () {
+      if (this.routeTopLevel) {
+        return this.menu.find(e => e.name === this.routeTopLevel).children
+      } else {
+        return undefined
+      }
+    }
+  },
+  watch: {
+    routeName () {
+      this.doSetSideMenu()
+    }
+  },
+  mounted () {
+    this.doSetSideMenu()
+  },
+  methods: {
+    ...mapMutations([
+      'setSideMenu'
+    ]),
+    // 更新一次侧边栏
+    doSetSideMenu () {
+      if (this.routeTopLevelMenu) {
+        this.setSideMenu({
+          sideMenu: this.routeTopLevelMenu
+        })
+      }
+    },
+    // 跳转到某个路由
+    active (item) {
+      this.$router.push({
+        name: item.name
+      })
+    }
+  }
+}
+</script>

src/pages/core/login/index.vue

@@ -7,33 +7,18 @@
       </div>
       <div class="form-group">
         <el-card>
-          <el-form
+          <el-form ref="loginForm" label-position="top" :rules="rules" :model="formLogin">
-            ref="loginForm"
-            label-position="top"
-            :rules="rules"
-            :model="formLogin">
             <el-form-item  prop="username">
-              <el-input
+              <el-input type="text" v-model="formLogin.username" placeholder="用户名">
-                type="text"
-                v-model="formLogin.username"
-                placeholder="用户名">
                 <i slot="prepend" class="fa fa-user-circle-o"></i>
               </el-input>
             </el-form-item>
             <el-form-item prop="password">
-              <el-input
+              <el-input type="password" v-model="formLogin.password" placeholder="密码">
-                type="password"
-                v-model="formLogin.password"
-                placeholder="密码">
                 <i slot="prepend" class="fa fa-keyboard-o"></i>
               </el-input>
             </el-form-item>
-            <el-button
+            <el-button @click="submit" type="primary" class="button-login">登陆</el-button>
-              @click="submit"
-              type="primary"
-              class="button-login">
-              登陆
-            </el-button>
           </el-form>
         </el-card>
         <el-button type="info" class="button-help">