vue嵌套路由的匹配规则是怎么样的？

Question

路由：

  {
    path: "/",
    name: "Home",
    component: Home,
    children: [
      {
        path: "news",
        name: "news",
        component: () => import("../views/News.vue"),
      },
      {
        path: "contact",
        name: "contact",
        component: () => import("../views/Contact.vue"),
      },
    ],
  },
  {
    path: "/about",
    name: "About",
    component: () => import("../views/About.vue"),
  },

Home 组件:

<template>
  <div class="home">
    <p>这里是Home</p>
    <router-view name="news"></router-view>
    <router-view name="contact"></router-view>
  </div>
</template>

News.vue:

<template>
  <div class="news">这里是新闻列表部分</div>
</template>
<script>
export default {
  name: "News"
};
</script>
<style scoped>
.news {
  border: 1px solid #ccc;
  background-color: coral;
}
</style>

Contact.vue:

<template>
  <div class="contact">联系信息</div>
</template>
<script>
export default {
  name: "Contact"
};
</script>
<style scoped>
.contact {
  border: 1px solid #ccc;
  background-color: burlywood;
}
</style>

为什么访问 localhots:8000/news的时候不是渲染 News.vue 组件？

Answer 1

你Home里面的router-view设置了name是 命名视图，news这个 children-route 挂载在默认default上，需要挂载在对应name上才能正确渲染