Vuejs: общие компоненты, используемые на нескольких страницах, исчезли

Question

прямо сейчас я пишу одностраничное приложение в vue.js, используя vue-router.Такие страницы, как домашняя страница, страница входа и т. Д., Имеют общий компонент навигации и нижнего колонтитула.Однако на нескольких страницах мне нужен весь экран, чтобы навигация и нижний колонтитул не отображались.

Поэтому я решил вложить компоненты и при необходимости включить компонент навигации и нижнего колонтитула.Теперь у меня проблемы с тем, что шаблон навигации и нижнего колонтитула исчез на всех страницах.

Редактировать : более полную демонстрацию можно найти в этом репозитории Github..

Вот упрощенная версия файлов, которые я использую:

index.html:

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

router.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://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>