Vue.js框架--嵌套路由（二十）

主要操作技能

    嵌套路由 就是 (路由里面嵌套他的子路由)
    子路由关键属性children
  1）配置路由

{
        path: '/user',
        component: Users,
        children: [{  //父子组件配置,注意不能写/
                path: 'useradd',
                component: UserAdd
            },
            {
                path: 'userlist',
                component: UserList
            },

        ]

    }

  
  2）父路由里面配置子路由显示
      <router-view></router-view>最顶层的出口，渲染最高级路由匹配到的组件

<div class="right">
				<!--右边-->
				<!--内容区域-->
				<!-- 路由出口 -->
				<!-- 路由匹配到的组件将渲染在这里 -->
				<router-view></router-view>
			</div>

 模拟: http://element-cn.eleme.io/#/zh-CN/component/installation

说明： 单击“组件”，左边是导航单击，右边是显示的内容

编写代码:

User.vue 用户中心

<template>
	<div id="users">
		<h2>{{msg}}</h2><br />

		<div class="user">
			<div class="left">
				<!--左边-->
				<ul>
					<li>
						<router-link to="/user/useradd">添加用户</router-link>
					</li>
					<li>
						<router-link to="/user/userlist">用户列表</router-link>
					</li>
				</ul>
			</div>
			<div class="right">
				<!--右边-->
				<!--内容区域-->
				<!-- 路由出口 -->
				<!-- 路由匹配到的组件将渲染在这里 -->
				<router-view></router-view>
			</div>

		</div>

	</div>
</template>

<script>
	export default {
		data() {
			return {
				msg: '我是用户组件'
			}
		}
	}
</script>

<style lang="scss" scoped>
	.user {
		display: flex;
		.left {
			width: 200px;
			min-height: 400px;
			border-right: 10px solid #eee;
		}
		.right {
			flex: 1;
		}
		
		li{
			line-height: 2;
		}
	}
</style>

UserAdd.vue 与UserList.vue 子组件

<template>
	<div id="usersAdd">
		<h3> add user data!</h3>
	</div>
</template>

 

 main.js

import Users from './components/Users.vue' //引入组件
import UserAdd from './components/user/UserAdd.vue' //引入子组件
import UserList from './components/user/UserList.vue' //引子组件

//2.配置路由
const routes = [{
		path: '/home',
		component: Home
	},
	{
		path: '/news',
		name: 'news',
		component: News
	},
	{
		path: '/user',
		component: Users,
		children: [{  //父子组件配置,注意不能写/
				path: 'useradd',
				component: UserAdd
			},
			{
				path: 'userlist',
				component: UserList
			},

		]

	},

 

效果:

用户中心

单击用户,显示导航

左边导航，右边显示

单击用户列表，右边显示列表 

直接单击用户默认显示添加用户