Как передать пропсы через роутинг?

Question

[konst34]

Как передать пропсы через роутинг?
У меня есть такой роутинг:

const routes = [
  {
    path: "/",
    name: "Main",
    component: Main,
    children: [
      {
        path: "",
        component: Section,
      },
      {
        path: "/Catalog",
        name: "Catalog",
        component: Catalog,
        children: [
          {
            path: "/Catalog/Bread",
            component: Bread,
          },
        ],
      },
    ],
  },
];

Мне необходимо из компонента Catalog по адресу "/Catalog" передать значение переменной selected в компонент Bread по адресу "/Catalog/Bread".

Как это можно сделать?

Спасибо за помощь!

Answer 1

[Smirator]

Привет. Нужно использовать параметры маршрута. В твоем случае selected из Catalog в Bread.
Я бы попробовал например, так:

<template>
  <div>
    <!-- Компонент Catalog -->
    <router-link :to="{ name: 'Bread', params: { selected: selected } }">Go to Bread</router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: 'some_value', // значение selected
    };
  },
};
</script>

В нужном компоненте получил параметры. В твоем случае в Bread.

<template>
  <div>
    <!-- Компонент Bread -->
    <p>{{ selected }}</p>
  </div>
</template>

<script>
export default {
  props: ['selected'],
  mounted() {
    console.log(this.selected); // значение  доступно в этом компоненте через props
  },
};
</script>

Ну и роутинг:

const routes = [
  {
    path: "/",
    name: "Main",
    component: Main,
    children: [
      {
        path: "",
        component: Section,
      },
      {
        path: "/Catalog",
        name: "Catalog",
        component: Catalog,
        children: [
          {
            path: "/Catalog/Bread",
            name: "Bread",
            component: Bread,
            props: true, // это позволит передать параметры маршрута как props в Bread
          },
        ],
      },
    ],
  },
];

Comments

[konst34]

Подскажите, а через единое хранилище Pinia - это всё возможно сделать?

[Smirator]

konst34, тут вряд-ли подскажу. Стоит попробовать. Отпишись потом, получилось или нет

[Aetae]

konst34, стоит отметить, что так делать не рекомендуется.
Переданный параметр, отсутствующий в самом маршруте потеряется если пользователь перезагрузит страницу.
Надо сделать так:

{
  path: "/Catalog/Bread/:selected",
  ...
}

Или передавать не как params, а как query. Это первый вариант.

Второй, т.к. у вас Breed это ребёнок для Catalog вы может просто сделать так в Catalog:
<router-view :selected="selected"/>
т.о. значение будет передано как пропс, не затрагивая маршрут.

Третий вариант описал SymphoGraph.

Четвёртый: действительно использовать pinia и в компоненте Catalog пристать в стор, а в компоненте Bread читать из него.

Есть и иные, специфические варианты. В целом для выбора надо исходить из конкретной ситуации.

Answer 2

[SymphoGraph]

Во vue3 вы можете применить provide-inject.
В родителе:

const selected = ref({содержимое объекта})
provide('selected', selected)

В детях, внуках, правнуках:
const selected = inject('selected')