1.Background.vue 中使用一个 menuList 数组来放置侧边栏路由

2.侧边栏默认展开

src/views/admin/Admin.vue → src/views/admin/Background.vue

@@ -19,14 +19,14 @@ import TopNav from '@/views/admin/TopNav.vue'
 import LeftAside from '@/views/admin/LeftAside.vue'
 
 export default {
-  name: 'Main',
+  name: 'Background',
   components: {
     TopNav,
     LeftAside
   },
   data() {
     return {
-      collapsed: true
+      collapsed: false
     }
   },
   computed: { // 计算属性
@@ -35,7 +35,7 @@ export default {
     }
   },
   created() { // 钩子函数
-    this.$root.Bus.$on('Handle', value => {
+    this.$root.Bus.$on('HandleSideMenu', value => {
       this.collapsed = value
     })
   },

src/views/admin/LeftAside.vue

@@ -15,7 +15,19 @@
         <img class="logoimg" src="@/assets/img/icon/logo.png" alt="">
       </a>
     </div>
-    <el-submenu index="/background/account">
+    <el-submenu v-for="(item, index) in menuList" :index="item.url" :key="index">
+      <template slot="title">
+        <i :class="item.icon" />
+        <span>{{ item.title }}</span>
+      </template>
+      <el-menu-item-group>
+        <el-menu-item v-for="(child, index0) in item.children" :index="child.url" :key="index0">
+          <i :class="child.icon" />
+          <span slot="title">{{ child.title }}</span>
+        </el-menu-item>
+      </el-menu-item-group>
+    </el-submenu>
+<!--    <el-submenu index="/background/account">
       <template slot="title">
         <i class="el-icon-user" />
         <span>我的帐号</span>
@@ -33,173 +45,216 @@
           <i class="el-icon-film" />
           <span slot="title">OAuth</span>
         </el-menu-item>
-        <el-menu-item index="/background/my/message">
-          <i class="el-icon-message" />
-          <span slot="title">我的消息</span>
-        </el-menu-item>
-        <el-menu-item index="/background/my/contact">
-          <i class="el-icon-film" />
-          <span slot="title">联系人</span>
-        </el-menu-item>
-        <el-menu-item index="/background/my/vip">
-          <i class="el-icon-film" />
-          <span slot="title">我的会员</span>
-        </el-menu-item>
-        <el-menu-item index="/background/my/wallet">
-          <i class="el-icon-wallet" />
-          <span slot="title">我的钱包</span>
-        </el-menu-item>
-      </el-menu-item-group>
-    </el-submenu>
-    <el-submenu index="/background/my">
-      <template slot="title">
-        <i class="el-icon-s-data" />
-        <span>我的数据</span>
-      </template>
-      <el-menu-item-group>
-        <el-menu-item index="/background/my/album">
-          <i class="el-icon-collection" />
-          <span slot="title">播放列表</span>
-        </el-menu-item>
-        <el-menu-item index="/background/my/history">
-          <i class="el-icon-s-data" />
-          <span slot="title">历史记录</span>
-        </el-menu-item>
-        <el-menu-item index="/background/my/rcmd">
-          <i class="el-icon-film" />
-          <span slot="title">我的推荐</span>
-        </el-menu-item>
-      </el-menu-item-group>
-    </el-submenu>
-    <el-submenu index="/background/post">
-      <template slot="title">
-        <i class="el-icon-film" />
-        <span>我的稿件</span>
-      </template>
-      <el-menu-item-group>
-        <el-menu-item index="/background/post/video">
-          <i class="el-icon-film" />
-          <span slot="title">视频稿件</span>
-        </el-menu-item>
-        <el-menu-item index="/background/post/image">
-          <i class="el-icon-picture" />
-          <span slot="title">图片稿件</span>
-        </el-menu-item>
-        <el-menu-item index="/background/post/article">
-          <i class="el-icon-picture" />
-          <span slot="title">文章稿件</span>
-        </el-menu-item>
-      </el-menu-item-group>
-    </el-submenu>
-    <el-menu-item index="/background/4">
-      <i class="el-icon-setting" />
-      <span slot="title">导航四</span>
-    </el-menu-item>
-    <el-submenu index="/background/site">
-      <template slot="title">
-        <i class="el-icon-menu" />
-        <span>站点配置</span>
-      </template>
-      <el-menu-item-group>
-        <el-menu-item index="/background/site/store">
-          <i class="el-icon-picture" />
-          <span slot="title">存储配置</span>
-        </el-menu-item>
-        <el-menu-item index="/background/site/notify">
-          <i class="el-icon-user" />
-          <span slot="title">通知配置</span>
-        </el-menu-item>
-        <el-menu-item index="/background/site/registry">
-          <i class="el-icon-picture" />
-          <span slot="title">注册配置</span>
-        </el-menu-item>
-        <el-menu-item index="/background/site/category">
-          <i class="el-icon-film" />
-          <span slot="title">站点分区</span>
-        </el-menu-item>
-      </el-menu-item-group>
-    </el-submenu>
-    <el-submenu index="/background/admin">
-      <template slot="title">
-        <i class="el-icon-files" />
-        <span>后台管理</span>
-      </template>
-      <el-menu-item-group>
-        <el-menu-item index="/background/admin/charge">
-          <i class="el-icon-picture" />
-          <span slot="title">充值请求</span>
-        </el-menu-item>
-        <el-menu-item index="/background/admin/user">
-          <i class="el-icon-user" />
-          <span slot="title">管理用户</span>
-        </el-menu-item>
-        <el-menu-item index="/background/admin/video">
-          <i class="el-icon-film" />
-          <span slot="title">管理视频</span>
-        </el-menu-item>
-        <el-menu-item index="/background/admin/avatar">
-          <i class="el-icon-picture" />
-          <span slot="title">用户头像</span>
-        </el-menu-item>
-      </el-menu-item-group>
-    </el-submenu>
-    <el-submenu index="/background/backend">
-      <template slot="title">
-        <i class="el-icon-loading" />
-        <span>后端系统</span>
-      </template>
-      <el-menu-item-group>
-        <el-menu-item index="/background/backend/gateway">
-          <i class="el-icon-user" />
-          <span slot="title">网关</span>
-        </el-menu-item>
-        <el-menu-item index="/background/backend/dubbo_service">
-          <i class="el-icon-user" />
-          <span slot="title">Dubbo 服务</span>
-        </el-menu-item>
-        <el-menu-item index="/background/backend/springcloud_service">
-          <i class="el-icon-user" />
-          <span slot="title">SpringCloud 服务</span>
-        </el-menu-item>
-        <el-menu-item index="/background/backend/access_log">
-          <i class="el-icon-film" />
-          <span slot="title">访问日志</span>
-        </el-menu-item>
-        <el-menu-item index="/background/backend/runtime_log">
-          <i class="el-icon-film" />
-          <span slot="title">运行日志</span>
-        </el-menu-item>
-        <el-menu-item index="/background/backend/realtime_log">
-          <i class="el-icon-film" />
-          <span slot="title">实时日志</span>
-        </el-menu-item>
       </el-menu-item-group>
     </el-submenu>
+    -->
   </el-menu>
 </template>
 
 <script>
 export default {
   name: 'LeftAside',
-  data: function() {
+  data() {
     return {
-      collapsed: true,
-      collapseTransition: false
+      collapsed: false,
+      collapseTransition: false,
+      menuList: []
     }
   },
-  created: function() { // 钩子函数
-    this.$root.Bus.$on('Handle', value => {
+  mounted() {
+    this.initSideMenu()
+  },
+  created() {
+    // 钩子函数
+    this.$root.Bus.$on('HandleSideMenu', value => {
       this.collapsed = value
     })
   },
-  methods: {}
+  methods: {
+    initSideMenu() {
+      this.menuList = [
+        {
+          url: '/background/account',
+          title: '我的帐号',
+          icon: 'el-icon-user',
+          children: [
+            {
+              url: '/background/account/profile',
+              title: '个人资料',
+              icon: 'el-icon-user'
+            },
+            {
+              url: '/background/account/record',
+              title: '登入记录',
+              icon: 'el-icon-user'
+            },
+            {
+              url: '/background/account/oauth',
+              title: 'OAuth应用',
+              icon: 'el-icon-user'
+            }
+          ]
+        },
+        {
+          url: '/background/my',
+          title: '我的',
+          icon: 'el-icon-s-data',
+          children: [
+            {
+              url: '/background/my/message',
+              title: '我的消息',
+              icon: 'el-icon-s-data'
+            },
+            {
+              url: '/background/my/wallet',
+              title: '我的钱包',
+              icon: 'el-icon-s-data'
+            },
+            {
+              url: '/background/my/contact',
+              title: '联系人',
+              icon: 'el-icon-s-data'
+            },
+            {
+              url: '/background/my/album',
+              title: '收藏夹',
+              icon: 'el-icon-s-data'
+            },
+            {
+              url: '/background/my/history',
+              title: '历史记录',
+              icon: 'el-icon-s-data'
+            },
+            {
+              url: '/background/my/rcmd',
+              title: '推荐设置',
+              icon: 'el-icon-s-data'
+            }
+          ]
+        },
+        {
+          url: '/background/post',
+          title: '我的稿件',
+          icon: 'el-icon-film',
+          children: [
+            {
+              url: '/background/post/video',
+              title: '视频稿件',
+              icon: 'el-icon-film'
+            },
+            {
+              url: '/background/post/image',
+              title: '相册稿件',
+              icon: 'el-icon-film'
+            },
+            {
+              url: '/background/post/article',
+              title: '文章稿件',
+              icon: 'el-icon-film'
+            }
+          ]
+        },
+        {
+          url: '/background/site',
+          title: '站点配置',
+          icon: 'el-icon-setting',
+          children: [
+            {
+              url: '/background/site/store',
+              title: '存储配置',
+              icon: 'el-icon-setting'
+            },
+            {
+              url: '/background/site/notify',
+              title: '通知配置',
+              icon: 'el-icon-setting'
+            },
+            {
+              url: '/background/site/registry',
+              title: '注册配置',
+              icon: 'el-icon-setting'
+            },
+            {
+              url: '/background/site/category',
+              title: '站点分区',
+              icon: 'el-icon-setting'
+            }
+          ]
+        },
+        {
+          url: '/background/admin',
+          title: '后台管理',
+          icon: 'el-icon-user-solid',
+          children: [
+            {
+              url: '/background/admin/charge',
+              title: '充值请求',
+              icon: 'el-icon-user-solid'
+            },
+            {
+              url: '/background/admin/user',
+              title: '用户管理',
+              icon: 'el-icon-user-solid'
+            },
+            {
+              url: '/background/admin/video',
+              title: '视频管理',
+              icon: 'el-icon-user-solid'
+            },
+            {
+              url: '/background/admin/avatar',
+              title: '用户头像',
+              icon: 'el-icon-user-solid'
+            }
+          ]
+        },
+        {
+          url: '/background/backend',
+          title: '后端系统',
+          icon: 'el-icon-loading',
+          children: [
+            {
+              url: '/background/backend/gateway',
+              title: '网关',
+              icon: 'el-icon-loading'
+            },
+            {
+              url: '/background/backend/dubbo_service',
+              title: 'Dubbo服务',
+              icon: 'el-icon-loading'
+            },
+            {
+              url: '/background/backend/springcloud_service',
+              title: 'SpringCloud服务',
+              icon: 'el-icon-loading'
+            },
+            {
+              url: '/background/backend/access_log',
+              title: '访问日志',
+              icon: 'el-icon-loading'
+            },
+            {
+              url: '/background/backend/runtime_log',
+              title: '运行日志',
+              icon: 'el-icon-loading'
+            },
+            {
+              url: '/background/backend/realtime_log',
+              title: '实时日志',
+              icon: 'el-icon-loading'
+            }
+          ]
+        }
+      ]
+    }
+  }
 }
 </script>
 
 <style>
 .el-menu-vertical-demo:not(.el-menu--collapse) {
-  width: 240px;
-  min-height: 800px;
+  width: 180px;
+  min-height: 720px;
 }
 
 .el-menu-vertical-demo:not(.el-menu--collapse) {

src/views/admin/TopNav.vue

@@ -32,10 +32,10 @@ import { getAuthedUser } from '@/utils/auth'
 export default {
   name: 'TopNav',
   mixins: [userMixin],
-  data: function() {
+  data() {
     return {
       user: null,
-      collapsed: true,
+      collapsed: false,
       imgshow: require('@/assets/img/logo.png'),
       imgsq: require('@/assets/img/logo.png')
     }
@@ -47,7 +47,7 @@ export default {
     doToggle() {
       // 主要控制 collapsed 为 true 或 false
       this.collapsed = !this.collapsed
-      this.$root.Bus.$emit('Handle', this.collapsed)
+      this.$root.Bus.$emit('HandleSideMenu', this.collapsed)
     },
     backToHome() {
       const path = '/'