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

chaihongjun
  • 288

路由:

  {
    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 组件?

回复
阅读 742
1 个回答
✓ 已被采纳

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
你知道吗?

宣传栏