vue之路由的嵌套（父子路由）

路由的嵌套：

1：配置路由

[code]main.js文件中
import Users from './components/Users'
import UserAdd from './components/Users/UserAdd'
import UserList from './components/Users/UserList'

/*定义路由 */
const routes = [
              { path: '/', component: Home },
              { path: '/Home', component: Home },
{
path: '/Users',
component: Users,
//配置子路由
children:[
{ path: 'UserAdd', component: UserAdd},
{ path: 'UserList', component: UserList },
]
}
            
            ]

2:父路由页面配置子路由显示的地方

[code]<template>
<div id="Users">
<div class="users">
<div class="left">
<!-- 左侧用来显示Users的子路由 -->
<ul>
<router-link to="/Users/UserAdd">增加用户</router-link>
<router-link to="/Users/UserList">用户列表</router-link>

</ul>
</div>
<div class="right">
<!-- 右侧用来显示子路由对应的内容，即子路由对应页面的显示区域 -->
<router-view></router-view>
</div>
</div>
</div>
</template>
<script>
export default {

}
</script>

<style lang="scss" scoped>
.users{
display:flex;
.left{
/* 左侧固定宽度 */
width: 200px;
min-height: 400px;
border-right: 1px solid #eee;
padding: 10px 50px;
a{
display: inline-block;
width: 100%;
}
li{

line-height: 2;
}
}
.right{
/* 右侧自适应 */
flex:1;
}
}
</style>

最后效果：

到此一个简单的Vue嵌套路由的实例完成，欢迎各路道友批评指点！