Создать SPA в Nuxt. js

Question

У меня есть панель навигации (и, возможно, нижний колонтитул), которая должна быть видна на каждой вложенной странице. Так что в основном меняется только содержание. В Vue. js я бы просто использовал <router-view> в качестве заполнителя для содержимого Dynami c и <router-link> для переключения этого содержимого.

Теперь в Nuxt. js У меня есть следующее dir структура.

pages/
--| calendar/
-----| index.vue
--| people/
-----| index.vue
--| index.vue

И моя панель навигации состоит из двух <nuxt-link>, например <nuxt-link :to="/calendar"> (some content) </nuxt-link>. Поэтому, если я нажму на эту ссылку, панель навигации исчезнет, ​​и отобразится только содержимое /pages/calendar/index.vue. Извините, я новичок в nuxt, но я подумал, что можно создать SPA, как в Vue. js. Я даже изменил режим с универсального на спа, а также использовал подход Vue. js, как описано выше, безуспешно.

Answer 1

Вы можете расширить основной макет, добавив файл layout / default. vue. Он будет использоваться для всех страниц, для которых не указан макет. Не забудьте добавить компонент при создании макета, чтобы фактически включить компонент страницы.

Примерно так:

<template>
  <div>
    <div>My blog navigation bar here</div>
    <Nuxt />
    <div>My footer is here</div>
  </div>
</template>

если вам нужно использовать его в маршруте дочернего элемента, вы можете используйте внутри своих страниц / index. vue NUXT-CHILD для получения вложенной дочерней страницы ...

<template>
  <div>
    <div>FIXED BANNER</div>
      <nuxt-child />
    <div>FIXED LIST OF ITEMS </div>
  </div>
</template>