如何在VueJS的单个路径中显示多个组件？

Question

我的folder中有多个组件。我想在单个路由路径（/）中显示所有组件。我怎样才能做到这一点？在默认路径（/）中，我希望其他组件与标题一起显示。

Answer 1

您需要添加一个包含所有组件的视图。例如

path: / , component: mainPage

同时打开mainPage.vue-组件时，他包括许多其他组件，例如页眉，页脚，窗体等。您可以在此处阅读https://vueschool.io/articles/vuejs-tutorials/structuring-vue-components/，并在此处查看其外观示例https://codesandbox.io/s/o29j95wx9?file=/components/TodoList.vue

Answer 2

您需要制作一个包含所有子组件的视图文件

检查我制作的演示：https://codesandbox.io/s/cold-snow-hsy4u?file=/src/views/Home.vue

1. 创建视图Home.vue文件
2. [创建路由器（在该示例中，我在router文件夹中制作了一个文件，然后从main.js导入），然后添加指向Home.vue的路由
3. 通过在选项上放置Vue对象，告诉router使用路由器

new Vue({
  router,
  render: h => h(App)
}).$mount("#app");

4. 在<router-view />上添加App.vue以告诉Vue在哪里显示路由器组件
5. 在Home.vue中注册子组件，然后在<template>中显示它