NUXT - повторно использовать вид по умолчанию. vue на 3 страницах - PullRequest
Новая
       65

NUXT - повторно использовать вид по умолчанию. vue на 3 страницах

0 голосов
/ 13 июля 2020

В Nuxt у меня есть 3 страницы (индекс, логин и регистрация), которые должны отображать ту же структуру, что и код выше. Это форма с вкладками. затем в теге это были некоторые отличия. Я решил поместить этот код в файл default. vue. Но теперь у меня есть больше страниц, на которых мне не нужно показывать класс «формы» и вкладки. Любое предложение о том, как я могу этого добиться? Спасибо 

<template>
  <div>
    <div class="container is-fluid">
      <navbar></navbar>
      <div class="places">
        <div class="structure">
          <div class="forms">
            <div class="tabs help-tabs">
              <ul class="tab_title">
                <li :class="[tab === 'register' ? 'is-active' : '']">
                  <a @click="tab='register'">Register</a>
                </li>
                <li
                  :class="[tab === 'login' ? 'is-active' : '']"
                  @click="goToRoute('login')">
                  <a @click="tab = 'login'">Login</a>
                </li>
              </ul>
            </div>
          </div>
          <nuxt />
        </div>
      </div>
    </div>
  </div>
</template>

1 Ответ

1 голос
/ 13 июля 2020

Вы можете создать второй layout рядом с default.vue и использовать его только для этих маршрутов (индекс, вход и регистрация), чтобы у вас было:

  1. auth.vue для индекса, страницы входа и регистрации
  2. default.vue для всех остальных страниц

Затем вы можете напрямую указать, какой макет вы хотите использовать в файле страницы, например здесь 

export default {
  layout: 'auth',
}

Или вы придерживаетесь одного единственного макета (default.vue) и создаете компонент (например, компонент вкладки), который затем отображаете на всех трех маршрутах.

...