Блог

Главная - Вопросы по программированию - Статическая страница внутри динамического маршрута NuxtJS

Статическая страница внутри динамического маршрута NuxtJS

#javascript #vue.js #vuejs2 #nuxt.js #vue-router

Вопрос:

у меня есть приложение Nuxt, в котором есть список автомобилей: /автомобили, там вы можете выбрать конкретный /автомобили/:идентификатор. Я хочу внутри панели инструментов, которая ведет к различным представлениям: */автомобили/:идентификатор/маршруты, */автомобили/:идентификатор/водители и т. Д.

Внутри /автомобили/:идентификатор, с помощью которого я создаю панель инструментов и div <NuxtChild /> 

 <template>
  <v-container>
    <v-toolbar flat class="rounded-pill " height="50">
      <v-tabs centered slider-color="#356FA4" color="#55BAB4" icons-and-text>
        <v-tab>Overview<v-icon>fa-eye</v-icon></v-tab>
        <v-tab :to="`${$route.params.id}/gauges`"
          >Gauges <v-icon>mdi-gauge</v-icon></v-tab
        >
        <v-tab>Routes <v-icon>mdi-map-marker</v-icon></v-tab>
        <v-tab>Drivers <v-icon>fa-users</v-icon></v-tab>
        <v-tab>Damages <v-icon>fa-car-crash</v-icon></v-tab>
        <v-tab>Documents <v-icon>mdi-file-document-outline</v-icon></v-tab>
        <v-tab>Reminders <v-icon>mdi-alarm</v-icon></v-tab>
      </v-tabs>
    </v-toolbar>
    <div>
      <NuxtChild />
    </div>
  </v-container>
</template>

Когда я нажимаю на изменение всей страницы, я хочу сохранить панель инструментов на месте. Чего мне не хватает?

Структура папок:

 |   index.vue
|   login.vue
|   map.vue
|   organization.vue
|   register.vue
|
 ---cars
|   |   index.vue
|   |
|   ---_id
|           gauges.vue
|           index.vue
|
---users
    |   index.vue
    |
    ---_id
            index.vue

чего я хочу

Ответ №1:

Я протестировал его прямо сейчас и понял, что вы должны просто поместить _id.vue файл вместо _id/index.vue . Таким образом, ваша папка должна быть примерно такой:

  ---cars
|   |   index.vue
|   |   _id.vue (move your parent codes here)
|   ---_id
|           gauges.vue
|

Также есть хороший пример в документах вложенных страниц nuxt:

pages/parent.vue содержит компонент. Все, что находится на этой странице, будет видно как на родительской, так и на дочерней страницах.

страницы/родитель/индекс.vue содержит текст, который будет заменен при нажатии на дочерние ссылки.

страницы/родитель/ребенок.vue и страницы/родитель/ребенок 2.vue будут отображаться как родитель/ребенок и родитель/ребенок 2.

Метки: