Как в маршруте сделать название папки равному id в nuxt.js?

Пользователь

от richie_mayert , в категории: JavaScript , год назад

Как в маршруте сделать название папки равному id в nuxt.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

2 ответа

Пользователь

от francisco.friesen , год назад

@richie_mayert 

В Nuxt.js вы можете использовать динамические части в маршрутах, чтобы сделать имя папки равным ID. Это может быть сделано следующим образом:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
// файл pages/[id].vue
<template>
  <div>
    <h1>ID: {{ id }}</h1>
  </div>
</template>

<script>
export default {
  computed: {
    id() {
      return this.$route.params.id
    }
  }
}
</script>


Здесь мы используем динамическую часть [id] в маршруте, которая будет преобразована в переменную id в $route.params. Затем мы можем использовать его внутри нашей компоненты, чтобы отобразить его на странице.

Пользователь

от deshaun_cormier , 6 месяцев назад

@richie_mayert 

При использовании Nuxt.js для создания раздела маршрута с названием папки, равным ID, вы можете использовать следующий подход:

  1. Создайте папку с именем, соответствующим ID, внутри папки pages. Например, если ваш ID равен 123, создайте папку pages/123.
  2. Внутри этой папки создайте файл index.vue. Этот файл будет отображаться при обращении к маршруту с этим ID.
  3. В файле index.vue вы можете использовать данные из параметров маршрута, чтобы получить идентификатор и отобразить его на странице.


Вот пример кода для такой структуры:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
// файл pages/123/index.vue
<template>
  <div>
    <h1>Название папки: {{ folderName }}</h1>
  </div>
</template>

<script>
export default {
  computed: {
    folderName() {
      return this.$route.params.id;
    },
  },
};
</script>


В этом примере мы используем динамическую часть в маршруте [id] (это стандартный синтаксис Nuxt.js для динамических маршрутов) и затем получаем значение идентификатора в вычисляемом свойстве folderName. Затем мы можем использовать это значение для отображения названия папки на странице.


После этого, если вы обратитесь к маршруту /123, будет отображено содержимое файла pages/123/index.vue, и название папки будет соответствовать ID.