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(...)