Как визуализировать компоненты только один раз в Nuxt JS?

Question

В Nuxt Framework с использованием мода SPA у меня есть макет по умолчанию:

<template>
  <div id="wrapper">
    <my-header />
    <nuxt />
    <my-footer />
  </div>
</template>

В приведенном выше примере <my-header> и <my-footer> - это созданные мной компоненты.

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

Answer 1

Предположим, что предоставленный вами код находится в макетах> default. vue, например, и что вы не меняли настройки по умолчанию в папке .nuxt, он будет отображаться только один раз.

Изменится только то, что находится внутри <nuxt /> - это будет содержание вашего приложения в целом. В основном он будет отображать компоненты страницы (используемые только в макетах - ref ).

Итак, в этом случае, пока вы не обновите sh страницу, верхний и нижний колонтитулы будут не подлежат повторной визуализации. При перемещении между страницами вы можете использовать nuxt-link ( ref ), а не принудительно перезагружать (оставьте настройки по умолчанию).

Пример nuxt-link использование:

<nuxt-link to="/about">About page</nuxt-link>

Страница информации будет расположена в:

страницах> about> index. vue