Передача входных параметров в компонент, как реализовать?

Question

[Александр]

Здравствуйте! На компоненте есть кнопка, при клике на кнопку:

<v-btn :to="{ path: '/field_of_activity', props: { messageId: 1}}">+</v-btn>

открывается другой компонент и я передаю туда параметр, но параметр как был пустым, так и остался. Если передавать параметр через файл router.js, то все нормально передается, но мне нужно именно моим способом передать параметр, в чем может быть проблема?

Answer 1

[0xD34F]

:to="{ path: '/field_of_activity', props: { messageId: 1}}"

Что-то вы тут напутали. Параметры передаются уж точно не через свойство props - оно используется в описании маршрутов.

Если хотите через path, тогда заменяете props на query (или прямо в path добавляете нужные параметры), а в описании соответствующего маршрута указываете что-то вроде props: route => ({ ...route.query }).

Или можно сделать маршрут именованным, тогда path меняете на name с соответствующим значением, а props на params.

Если хотите, чтобы поддерживались оба варианта, тогда в описании маршрута (помимо добавления имени) будет примерно так:

props: route => ({ ...route.query, ...route.params })

UPD. Вот вам демка, как это всё может выглядеть.

Comments

[Александр]

Спасибо!

Answer 2

[Виталий Инчин ☢]

На стороне компонента параметр указан в props?

Comments

[Александр]

Да

[Виталий Инчин ☢]

Можно код компонента глянуть?

[Александр]

Виталий Инчин ☢,

<template>
    <div>
        <h3>Тест</h3>
        {{messageId}}
        //{{ $route.params.messageId }}
    </div>
</template>

<script>
export default {
    props: [
        "messageId"
    ],
    data: () => ({
        
    }),
    mounted() {
        
    }
}
</script>

[Виталий Инчин ☢]

Этот так не работает)
В props ловите то, что отсылаете, а именно
props:["to"]

[Александр]

Виталий Инчин ☢, Переименовал props, все равно не видно почему-то

[Виталий Инчин ☢]

Александр, как проверяете?

[Александр]

Виталий Инчин ☢, в mounted пишу: console.log(this.to), возвращается undefiend

[Виталий Инчин ☢]

<script>
export default {
    props: [
        "to"
    ],
    data: () => ({
        
    }),
    mounted() {
        console.log(this.to);
    }
}
</script>

так?