chaihongjun.me

Vue-router路由学习笔记路由嵌套路由和命名路由视图

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>

知识共享许可协议本作品采用知识共享署名-非商业性使用-禁止演绎 4.0 国际许可协议进行许可。作者:柴宏俊»