Передача параметра в роуте Nuxt

Передача параметра в маршрут

Часто, когда мы разрабатываем сложные приложения, нам требуется передать к нашему роуту некий параметр. Например, у нас есть некий роут product, который должен вывести продукт либо товар, у которого идентификатор равен трём. То есть, мы переходим по этому роуту, и у нас должна открыться страница, которая содержит параметр три. Как мы можем это сделать?

Настройка роутинга в Nuxt.js

В текущей системе роутинга Nuxt.js для этого нужно создать отдельную директорию product, которая будет являться частью этого адреса. Для того чтобы передавать какой-то параметр в этом роуте, мы должны создать специальный файл, который будет выглядеть следующим образом: [id].vue (квадратные скобки с именем параметра и расширением .vue).

Теперь, при обращении к роуту product, первый аргумент, который вы передадите, будет этим параметром.

Получение параметра в шаблоне

Принять этот параметр внутри вашего шаблона можно через глобальный объект.

<template>
  <div>
    <h1>Страница с параметром: {{ $route.params.id }}</h1>
  </div>
</template>

Соответственно, параметр будет доступен в $route.params, и мы сможем принять аргумент id.

Если нужно принять параметр внутри элемента <script>, это можно сделать следующим образом:

<script setup>
import { useRoute } from 'vue-router'

// Получаем объект маршрута
const route = useRoute()

// Извлекаем параметр id из маршрута
const id = route.params.id

// Можно также использовать console.log для вывода значения id
console.log(id)
</script>

Пример вывода параметра

Вот пример работы с параметром в Nuxt.js: получаем маршрут, извлекаем параметр и выводим его в консоль. Как видно, в консоли также выводится переданный параметр.