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

路由的嵌套：

1：配置路由

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:父路由页面配置子路由显示的地方

<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嵌套路由的实例完成，欢迎各路道友批评指点！