vue-element ui 学习笔记-05

| | Posts        | |
| |                   | |                     | |                  | |
| +--------------+ |                     | +-------------+ |
+------------------+                    +-----------------+

2.创建嵌套视图组件
 1) 用户信息组件
在 views/user 目录下创建一个名为 Profile.vue 的视图组件；该组件在当前章节无任何作用，主要用于展示嵌套效果；

<template>
	<div>
		个⼈信息
	</div>
</template>
<script>
	export default {
		name: "UserProfile"
	}
</script>
<style scoped>
</style>

 2) 用户列表组件
在 views/user 目录下创建一个名为 List.vue 的视图组件；该组件在当前章节无任何作用，主要用于展示嵌套效果；

<template>
	<div>
		用户列表
	</div>
</template>
<script>
	export default {
		name: "UserList"
	}
</script>
<style scoped>
</style>

3.配置嵌套路由
修改 router 目录下的 index.js 路由配置文件，代码如下：

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

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

// 用于嵌套的路由组件
import UserProfile from '../views/user/Profile'
import UserList from '../views/user/List'

Vue.use(Router);

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

说明：主要在路由配置中增加了 children 数组配置，用于在该组件下设置嵌套路由
4.修改首页视图
接着上一节的代码，我们修改 Main.vue 视图组件，此处使用了 ElementUI 布局容器组件，代码如下：

<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=