В Nuxt.js для передачи переменного количества параметров в роутер используется динамическое сопоставление маршрутов через использование квадратных скобок.
Для начала, определите маршрут в файле nuxt.config.js
с использованием квадратных скобок и названия параметра внутри них:
export default { routes: [ { path: '/example/:...params', name: 'example', component: 'example.vue' } ] }
В этом примере, :...params
означает, что вместо ...params
может быть передано переменное количество параметров.
Затем, в компоненте example.vue
, вы можете получить эти параметры в свойстве params
объекта $route
:
export default { mounted() { const params = this.$route.params.params console.log(params) // массив параметров } }
Теперь, когда вы перейдете по пути /example/param1/param2/param3
, массив params
будет содержать ['param1', 'param2', 'param3']
.
Если вы хотите сопоставить только определенное количество параметров или необязательные параметры, вы можете использовать следующий синтаксис:
export default { routes: [ { path: '/example/:param1?/:param2?/:param3?', name: 'example', component: 'example.vue' } ] }
Здесь параметры param1
, param2
и param3
являются необязательными. Вы можете использовать знак ?
для указания необязательных параметров.
Теперь, если вы перейдете по пути /example
, все параметры будут пустыми. Если вы перейдете по пути /example/param1
, param1
будет заполнен, а param2
и param3
будут пустыми. Если вы перейдете по пути /example/param1/param2/param3
, все параметры будут заполнены.
Надеюсь, эта информация поможет вам передавать переменное количество параметров в Nuxt.js router.