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

最新推荐文章于 2024-04-02 16:46:26 发布

渣渣砖

最新推荐文章于 2024-04-02 16:46:26 发布

阅读量7k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Vue 文章标签： Vue嵌套路由

本文链接：https://blog.csdn.net/W2457307263/article/details/88083784

Vue 专栏收录该内容

34 篇文章

订阅专栏

本文详细介绍了在Vue项目中如何配置和使用嵌套路由。通过具体步骤和代码示例，展示了父路由页面如何配置子路由，并在不同组件间进行切换。适合初学者和希望深入理解Vue路由机制的开发者。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

路由的嵌套：

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>

最后效果：