vue-router的路由嵌套

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

原创最新推荐文章于 2024-04-29 23:47:56 发布 · 175 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue-router

本文详细介绍了一种在前端路由中实现嵌套路由的方法，通过具体案例解释如何配置子路由及使用<router-view>实现视图组件的嵌套。文章还提到了重定向配置以及在地址栏中仅显示二级路径的技巧。

路劲嵌套

/miaov/ketang

路由配置嵌套

{
    path:'/miaov',
    name:'miaov', //有了默认的二级路径不需要父级设置name
    redirect:{name:'miaov-ketang'}//没有默认的子路径配置，可以使用重定向打开miaov就到ketang 注：如果有默认的二级路径就不可以了
    children:[
        {
            path:'',   //默认的二级路径  /miaov/
                      name:'miaov-ketang',
                      component：Ketang
        },
        {
                      path:'xuanyuan',
                      name:'xuanyuan',
                      component：Xuanyuan

                },
    ]

}

在所需嵌套的视图组件在嵌套视图在miaov的视图组件中再加

<router-view></router-view>

以 / 开头的路径会被当成根路径，这让你充分的使用了嵌套

使用场景，不带上一级路由，只需要在地址栏上显示二级路径