vue-router4 (六) 路由嵌套

也要大步向前呀

已于 2024-03-12 15:45:17 修改

阅读量420

点赞数 3

分类专栏： vue-router4 文章标签： vue.js 前端

于 2024-02-27 20:24:00 首次发布

本文链接：https://blog.youkuaiyun.com/2301_76510083/article/details/136330948

版权

vue-router4 专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了如何在Vue应用中使用路由配置，如京东和AntDesign页面布局，以及如何在父级路由组件中通过`<router-view>`动态展示子路由内容。例子展示了如何设置子路由和使用懒加载组件。

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

应用场景：

①比如京东页面的首页、购物车、我的按钮，可以点击切换到对应的页面；

② 比如 Ant Design左侧这些按钮点击就会切到对应的页面，此时可以把左侧按钮放在父路由中，右侧的子路由

1.路由配置，子路由存放在children中，children中还能再嵌套children

const routes:Array<RouteRecordRaw> = [
    {
        path:"/user",   //路径
        name:"Footer",    //路由名称
        component:()=>import("../components/footer.vue"), //组件名，此处懒加载方式
        //子路由存放在children中
        children:[
            {
                path:"/user",   //子路由路径
                name:"Login",    //子路由名称
                component:()=>import("../components/login.vue")
            },
            {
                path:"/user/reg",  
                name:"Reg",
                component:()=>import("../components/reg.vue")
            }
        ]
    }
]

2.父级路由组件中使用 <router-view ></router-view>（根据url不同，展示不同内容给用户）

<template>
    <router-view ></router-view>

    <br>
    我是父路由
    <div>
        <router-link to="/user" style="margin-right: 20px;">login</router-link>
        <router-link to="/user/reg">reg</router-link>
    </div>
</template>