vue路由嵌套

最新推荐文章于 2024-04-29 23:47:56 发布

王竹根

最新推荐文章于 2024-04-29 23:47:56 发布

阅读量147

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/dianziagen/article/details/88790019

版权

vue 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

/*路由的嵌套

1.配置路由
{

path: '/user',

component: User,
children:[
{ path: 'useradd', component: UserAdd },

{ path: 'userlist', component: Userlist }

]

}

2.父路由里面配置子路由显示的地方 <router-view></router-view>
*/,

效果：

使用：

<template>
    <!-- 所有的内容要被根节点包含起来 -->
    <div id="user">     
        <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:'我是一个user组件'             
            }
        }       
    }

</script>

<style lang="scss" scoped>

    .user{

        display:flex;

        .left{

            width:200px;

            min-height:400px;

            border-right:1px solid #eee;

            li{

                line-height:2;
            }
        }

        .right{
            flex:1;
        }

    }
</style>