fixed: menu 3 children selected

Author: sendya

src/components/menu/index.js

@@ -122,7 +122,12 @@ export default {
     },
     updateMenu () {
       let routes = this.$route.matched.concat()
-      this.selectedKeys = [ routes.pop().path ]
+      if (routes.length >= 3 && this.$route.meta.hidden) {
+        routes.pop()
+        this.selectedKeys = [ routes[1].path ]
+      } else {
+        this.selectedKeys = [ routes.pop().path ]
+      }
       let openKeys = []
       routes.forEach((item) => {
         openKeys.push(item.path)

src/router/index.js

@@ -244,42 +244,51 @@ export const asyncRouterMap = [
     path: '/account',
     component: Layout,
     name: 'account',
-    meta: { title: '个人页', icon: 'user' },
+    meta: { title: '个人页', icon: 'user', keepAlive: true },
     children: [
       {
-        path: 'center',
+        path: '/account/center',
         name: 'center',
         component: () => import('@/views/account/Index'),
-        meta: { title: '个人中心' }
+        meta: { title: '个人中心', keepAlive: true }
       },
       {
-        path: 'settings',
+        path: '/account/settings',
         name: 'settings',
         component: () => import('@/views/account/Index'),
-        meta: { title: '个人设置', hideHeader: true },
+        meta: { title: '个人设置', hideHeader: true, keepAlive: true },
         redirect: '/account/settings/base',
         alwaysShow: true,
         children: [
           {
-            path: 'base',
+            path: '/account/settings/base',
             name: 'BaseSettings',
             component: () => import('@/views/account/BaseSetting'),
-            hidden: true,
-            meta: { title: '基本设置' }
+            meta: { title: '基本设置', hidden: true, keepAlive: true }
           },
           {
-            path: 'security',
+            path: '/account/settings/security',
             name: 'SecuritySettings',
             component: () => import('@/views/account/Security'),
-            hidden: true,
-            meta: { title: '安全设置' }
+            meta: { title: '安全设置', hidden: true, keepAlive: true }
           },
           {
-            path: 'custom',
+            path: '/account/settings/custom',
             name: 'CustomSettings',
             component: () => import('@/views/account/Custom'),
-            hidden: true,
-            meta: { title: '个性化设置' }
+            meta: { title: '个性化设置', hidden: true, keepAlive: true }
+          },
+          {
+            path: '/account/settings/binding',
+            name: 'BindingSettings',
+            component: () => import('@/views/account/Binding'),
+            meta: { title: '账户绑定', hidden: true, keepAlive: true }
+          },
+          {
+            path: '/account/settings/notification',
+            name: 'NotificationSettings',
+            component: () => import('@/views/account/Notification'),
+            meta: { title: '新消息通知', hidden: true, keepAlive: true }
           },
         ]
       },

src/views/account/Binding.vue

@@ -0,0 +1,25 @@
+<template>
+  <a-list
+    itemLayout="horizontal"
+    :dataSource="data"
+  >
+
+  </a-list>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+
+      }
+    },
+    methods: {
+
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/account/Index.vue

@@ -1,33 +1,38 @@
 <template>
-  <a-card :bordered="false" :bodyStyle="{ padding: '16px 0' }">
+  <a-card :bordered="false" :bodyStyle="{ padding: '16px 0', height: '100%' }" :style="{ height: '100%' }">
     <div class="account-settings-info-main">
       <div class="account-settings-info-left">
         <a-menu
           mode="inline"
-          :defaultSelectedKeys="['1']"
+          :style="{ border: '0' }"
+          :defaultSelectedKeys="defaultSelectedKeys"
           type="inner"
           @openChange="onOpenChange"
         >
-          <a-menu-item key="1">
+          <a-menu-item key="/account/settings/base">
             <router-link :to="{ name: 'BaseSettings' }">
               基本设置
             </router-link>
           </a-menu-item>
-          <a-menu-item key="2">
+          <a-menu-item key="/account/settings/security">
             <router-link :to="{ name: 'SecuritySettings' }">
               安全设置
             </router-link>
           </a-menu-item>
-          <a-menu-item key="3">
+          <a-menu-item key="/account/settings/custom">
             <router-link :to="{ name: 'CustomSettings' }">
               个性化
             </router-link>
           </a-menu-item>
-          <a-menu-item key="4">
-            账户绑定
+          <a-menu-item key="/account/settings/binding">
+            <router-link :to="{ name: 'BindingSettings' }">
+              账户绑定
+            </router-link>
           </a-menu-item>
-          <a-menu-item key="5">
-            新消息通知
+          <a-menu-item key="/account/settings/notification">
+            <router-link :to="{ name: 'NotificationSettings' }">
+              新消息通知
+            </router-link>
           </a-menu-item>
         </a-menu>
       </div>
@@ -52,6 +57,8 @@
     },
     data () {
       return {
+        defaultSelectedKeys: [],
+
         // cropper
         preview: {},
         option: {
@@ -74,12 +81,16 @@
       }
     },
     created () {
-
+      this.updateMenu()
     },
     methods: {
       onOpenChange (openKeys) {
 
       },
+      updateMenu () {
+        let routes = this.$route.matched.concat()
+        this.defaultSelectedKeys = [ routes.pop().path ]
+      }
     },
   }
 </script>

src/views/account/Notification.vue

@@ -0,0 +1,25 @@
+<template>
+  <a-list
+    itemLayout="horizontal"
+    :dataSource="data"
+  >
+
+  </a-list>
+</template>
+
+<script>
+  export default {
+    data () {
+      return {
+
+      }
+    },
+    methods: {
+
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>