一、沿用上一篇博客“vue+elementUI”项目

二、编写List.vue和Profile.vue组件

List.vue:

<template>
    <h1>用户列表</h1>
</template>

<script>
    export default {
        name: "UserList"
    }
</script>

<style scoped>

</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14

Profile.vue:

<template>
    <h1>个人信息</h1>
</template>

<script>
    export default {
        name: "UserProfile"
    }
</script>

<style scoped>

</style>
1
2
3
4
5
6
7
8
9
10
11
12
13

三、修改Main.vue

<template>
<div>
<el-container>
  <el-aside width="200px">
    <el-menu :default-openeds="['1']">
      <el-submenu index="1">
        <template slot="title"><i class="el-icon-caret-right"></i>用户管理</template>
        <el-menu-item-group>
          <el-menu-item index="1-1">
            <router-link to="/user/profile">个人信息</router-link>
          </el-menu-item>
          <el-menu-item index="1-2">
            <router-link to="/user/list">用户列表</router-link>
          </el-menu-item>
        </el-menu-item-group>
      </el-submenu>
      <el-submenu index="2">
        <template slot="title"><i class="el-icon-caret-right"></i>内容管理</template>
        <e1-menu-item-group>
          <el-menu-item index="2-1">分类管理</el-menu-item>
          <el-menu-item index="2-2">内容列表</el-menu-item>
        </e1-menu-item-group>
      </el-submenu>
    </el-menu>
  </el-aside>

  <el-container>
    <el-header style="text-align: right; font-size: 12px">
      <el-dropdown>
        <i class="el-icon-setting" style="margin-right:15px"></i>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人信息</el-dropdown-item>
          <el-dropdown-item>退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </el-header>

      <el-main>
        <router-view></router-view>
      </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
  export default {
    name: "Main"
  }
</script>

<style scoped>
    .el-header {
      background-color: #89d0d1;
      color: #333;
      line-height: 60px;
    }

    .el-aside {
      color: #333;
    }
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63

四、嵌套路由

import Vue from 'vue'
import Router from 'vue-router'

import Main from '../views/Main'
import Login from '../views/Login'

import UserList from '../views/user/List'
import UserProfile from '../views/user/Profile'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/main',
      component: Main,//嵌套路由
      children: [
        {path: '/user/profile',component: UserProfile},
        {path: '/user/list',component: UserList}
      ]
    },{
      path: '/login',
      component: Login
    }
  ]
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

五、测试

六、项目结构