动态路由 NuxtJS 内的静态页面

Posted 2023-02-16

【中文标题】动态路由 NuxtJS 内的静态页面

【英文标题】：Static page inside dynamic route NuxtJS

【发布时间】：2021-11-28 23:54:06

【问题描述】：

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

在 /cars/:id 我用<NuxtChild />创建工具栏和div

<template>
  <v-container>
    <v-toolbar flat class="rounded-pill " >
      <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

【参考方案1】：

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

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

nuxt nested pages docs 中也有一个很好的例子：

pages/parent.vue 包含该组件。此页面上的所有内容都将在父页面和子页面上看到。

pages/parent/index.vue 包含在点击子链接时将被替换的文本。

pages/parent/child.vue 和 pages/parent/child2.vue 将被渲染为 parent/child 和 parent/child2。