Vuejs：在多个页面上使用的共享组件消失了

Question

现在，我正在使用 vue-router 在 vue.js 中编写一个单页应用程序。 主页、登录页面等页面都共享一个导航和页脚组件。 然而，在几页上，我需要整个屏幕，以便不显示导航和页脚。

因此，我决定嵌套组件并在必要时包含导航和页脚组件。 我现在的问题是，导航和页脚模板在所有页面上都消失了。

编辑：可以在这个 Github 存储库中找到更完整的演示。

这是我正在使用的文件的简化版本：

索引.html：

<div id="app">
  <router-view></routerview> 
</div>

路由器.js：

import Homepage from './homepage.vue';
import SignIn from './signin.vue';

const router = new VueRouter({
  routes: [
    {path: '/', component: Homepage},
    {path: '/signin', component: SignIn},
    ]
})

homepage.vue 和 signin.vue 组件：

<template>
  <navigation></navigation>  
    // some page-specific content
  <footer-vue></footer-vue>
</template>

<script>
import Navigation from './navigation.vue';
import Footer from './footer.vue';

export default {
  components: {
      'navigation': Navigation,
      'footer-vue': Footer,
  },
}
</script>

没有导航和页脚的组件：

<template> 
// some page-specific content
</template>

甚至可以以这种方式嵌套组件吗？ 我希望有人能够指出我正确的方向。

Answer 1

homepage.vue和signin.vue都有无效的模板。 例如

<template>
    <navigation></navigation>
    <h1>The homepage</h1>
    <footer-vue></footer-vue>
</template>

这是不允许的，因为它有 3 个根节点。 见https://v2.vuejs.org/v2/guide/components.html#A-Single-Root-Element

您需要包装它以使其工作：

<template>
    <div>
        <navigation></navigation>
        <h1>The homepage</h1>
        <footer-vue></footer-vue>
    </div>
</template>

请注意，此限制不适用于功能组件，并且预计也会针对 Vue 3 中的所有组件取消。

更令人担忧的是，您没有看到任何错误消息。 您确实需要对此进行调查，因为它表明您的开发设置存在很大问题。

您应该看到的错误消息示例：

 new Vue({ el: '#app', template: '<div></div><div></div>' })

 <script src="https://unpkg.com/vue@2.6.10/dist/vue.js"></script> <div id="app"> </div>