Vue的嵌套路由也就是路由包含路由。比如:
//路由配置 { path: "/", name: "Home", component: Home, children: [ { path: "news", name: "news", component: => import("../views/News.vue"), }, { path: "contact", name: "contact", component: () => import("../views/Contact.vue"), }, ], },
<!-- Home 组件 --> <template> <div class="home"> <p>这里是Home</p> <router-view></router-view> </div> </template>
使用children配置子路由,因此可以无限嵌套。上面的配置结合路由视图则需要在Home组件内使用。由于news和contact都是Home组件的下一级,所以视图出口需要在上一级的Home里面。
以上面的配置访问路由无论是访问news 还是 contact ,都会同时访问到news和contact。如果只想访问其一呢?这个就涉及到了路由视图的命名视图了。
命名过的视图可以和路由对象对应起来,实际是,路由对象里面的负责渲染的组件被指定了一个名称,和对应的被命名的视图有对应关系。
// 更改过的路由配置 { path: "/", name: "Home", component: Home, children: [ { path: "news", name: "news", components:{ news:()=> import("../views/News.vue"), //指定了使用名称为news的视图 } }, { path: "contact", name: "contact", components:{ contact:()=> import("../views/Contact.vue"), //指定了使用名称为contact的视图 } }, ], },
<!-- Home 组件 --> <template> <div class="home"> <p>这里是Home</p> <router-view name="news"></router-view> <!-- 这里渲染News.vue 组件 --> <router-view name="contact"></router-view> <!-- 这里渲染Contact.vue 组件 --> </div> </template>
这样在同一层级就可以控制同时显示或者单独显示内容了。
另外,关于命名路由,实际就是给路由对象一个name属性,当在选择路由对象的时候,可以通过这个属性控制。比如想返回Home组件:
this.$router.push({name:"Home"});
或者在链接处(需要v-bind绑定):
<router-link :to="{name:"Home"}">Home</router-link>