Vue-嵌套路由

  • Z时代
  • 2024-01-10
  • 分类：综合

vue

　　一个被渲染组件同样可以包含自己的嵌套 <router-view>。同样要有vue-router的三个要素：路由map 、路由视图、路由导航。
　　举个在"/apple" 下再嵌套路由的例子。
要素一：路由map
　　子路由需要在 VRouter 的参数中使用 children 配置：

let router=new VRouter({
    mode:'history',
    routes:[
        {
            path:'/apple/:color',
            component:Apple,
            name: 'applename',
            children:[
                {
                    path:'red-apple',
                    component:RedApple
                },
                {
                    path:'green-apple',
                    component:GreenApple
                }
            ]
        },
        {
            path:'/banana',
            name: 'banananame',
            component:Banana
        }
    ]
});


要素二：路由视图
　　在上级路由匹配组件里添加路由视图，本例中在 Apple 组件的模板添加 <router-view>

<template>
    <div>
            <p>apple </p>
            <router-view></router-view>
    </div>
</template>

要素三：路由导航
　　与顶级路由相似，可以使用<router-link> 创建 a 标签来定义导航链接，也可以使用 router.push （）方法

<router-link :to="{path: '/apple/red-apple' }"> to red apple</router-link>

router.push({path:'/apple/red-apple'})

　　要注意，以 / 开头的嵌套路径会被当作根路径。
　　更详细的关于 <router-link :to="...">和 router.push(...)的知识总结在 Vue-详解设置路由导航的两种方法：<router-link :to="..."> 和router.push(...)

以上是 Vue-嵌套路由 的全部内容， 来源链接： utcz.com/z/379458.html

回到顶部