动态路由内的静态页面 NuxtJS

Question

我有 Nuxt 应用程序，其中包含汽车列表：/cars，您可以在其中选择特定的 /cars/:id。我想在一个工具栏内路由到不同的视图：*/cars/:id/routes, */cars/:id/drivers等

在 /cars/:id 中我创建了工具栏和 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

what i want

Answer 1

我现在对其进行测试，发现您应该只放置 _id.vue 文件而不是 _id/index.vue。所以你的文件夹应该是这样的：

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

在 nuxt nested pages 文档中也有一个很好的例子：

pages/parent.vue contains the component. Everything on this page will be seen on both the parent and child pages.

pages/parent/index.vue contains text that will be replaced when the child links are clicked.

pages/parent/child.vue and pages/parent/child2.vue will be rendered as parent/child and parent/child2.

动态路由内的静态页面 NuxtJS

Static page inside dynamic route NuxtJS

javascript

vue.js

vue-router

vuejs2

nuxt.js