嵌套路由就是路由里面嵌套他的子路由
子路由关键属性children
每一个子路由里面可以嵌套多个组件
子组件又有路由导航和路由容器
<router-link to="/父路由的地址名字/要去的子路由的名字"></router-link>
下面实例讲解
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <router-link to="/green" tag="li">green</router-link> <router-link to="/fruit" tag="li">fruit</router-link> <router-view></router-view> </div> <template id="green"> <div>蔬菜 <router-link to="/green/organic">有机</router-link> <router-link to="/green/inorganic">无机</router-link> <router-view></router-view> </div> </template> <template id="fruit"> <div>水果 <router-link to="/fruit/sweet">甜的</router-link> <router-link to="/fruit/acid">酸的</router-link> <router-view></router-view> </div> </template> </body> <script src="node_modules/vue/dist/vue.js"></script> <script src="node_modules/vue-router/dist/vue-router.js"></script> <script> //父路由 有蔬菜，水果，蔬菜里面有有机蔬菜，无机蔬菜 ，水果里面有甜的酸的 let green={template:'#green'} let organic={template:"<div>有机蔬菜organic</div>"} let inorganic={template:"<div>无机蔬菜inorganic</div>"} let fruit={template:'#fruit'} let sweet={template:"<div>甜的</div>"} let acid={template:"<div>酸的</div>"} //路由路径映射表 let routes=[ //路由默认去的第一个组件 { path:'', component:green }, { path:"/green", component:green, children:[ { path:"", component:organic }, { path:"organic", component:organic }, { path:"inorganic", component:inorganic } ] }, { path:"/fruit", component:fruit, children:[ { path:"", component:sweet }, { path:"sweet", component:sweet }, { path:"acid", component:acid } ] }, //所有没有找到时候，去地址/green的组件 { path:"*", redirect:'/green' } ] //实例化一个路由 let router=new VueRouter({ routes }) let vm=new Vue({ el:"#app", data:{ }, router }) </script> </html>