Vue-router4 - передача объекта с помощью <router-link: to> не будет передавать динамические данные

Question

Я просмотрел эти параметры объекта vue-router@4.05, которые несколько связаны. В этом потоке есть упоминание об этом https://github.com/vuejs/vue-router-next/issues/494 , но я все еще не понимаю.

Я также пытаюсь передать некоторые данные с помощью атрибута : to компонента ссылки маршрутизатора . Я сделал две ручки, чтобы продемонстрировать проблему:

Перо 1 успешно передает объект, определенный в определении маршрутов.

Перо 2 пытается передать динамический объект и вместо фактического объекта получает строку с [Object object], как описано в проблеме с github.

вывод консоли:

[Предупреждение Vue]: Недопустимая опора: ошибка проверки типа для опоры "репозиторий". Ожидаемый объект, получил строку со значением> "[объект объекта]". at <Repository repository = "[объект объекта]" onVnodeUnmounted = fn ref = Ref> at at at

Итак, если я понимаю это прямо, в конечном итоге вы не можете передать динамический объект, потому что он проанализирован, но вы можете передать статический объект?

Я пробовал с props: true и всем остальным, я пробую решение функционального режима в качестве более сложного примера

фрагменты:

          <router-link :to="{ name: 'Home' }">Home</router-link>
    <router-view />

---

          <router-link
      :to="{
        name: 'Repository',
        params: { repository: { one: '1', two: '2' } },
      }">click me</router-link>

v1

          const routes: Array<RouteRecordRaw> = [
    {
      path: "/",
      name: "Home",
      component: Home
    },
    {
      path: "/repo/",
      name: "Repository",
      component: () => import("../components/Repository.vue"),
      props: (route) => {
        console.log("entered route");
        console.log(route);
        return { ...route.params, repository: { one: "1", two: "2" } };
      }
    }];

v2

          const routes: Array<RouteRecordRaw> = [
    {
      path: "/",
      name: "Home",
      component: Home
    },
    {
      path: "/repo/",
      name: "Repository",
      component: () => import("../components/Repository.vue"),
      props: (route) => {
        console.log("entered route");
        console.log(route);
        return { ...route.params };
      }
    }];

Answer 1

Что происходит в вашем коде:

Как видно из предупреждающего сообщения в консоли, на самом деле вы получаете String из опоры вместо Object:

[Предупреждение Vue]: Недопустимая опора: ошибка проверки типа для опоры "репозиторий". Ожидаемый объект, есть строка

Многие люди предлагают использовать Vuex и устанавливать глобальные состояния в качестве решения, что, как я считаю, не то, что вы ищете.

Решение

Чтобы избежать получения [Object, Object] в качестве переданных данных вы можете преобразовать свой объект в строку на исходной странице, а затем снова проанализировать переданную строку в объект на целевой странице.

Исходная страница / компонент маршрутизатора

       <router-link
      :to="{
        name: 'Your_Route_Name',
        params: { repository: JSON.stringify({ one: '1', two: '2' }) },
      }">click me</router-link>

В вашем целевом компоненте маршрутизатора

      <template>
    <div>
        {{ JSON.parse(repository) }}
    </div>
</template>

<script>
export default {
    props: ["repository"],
    setup(props) {
        //Log the parsed object in console. Example shown with Vue3 Composition API but you get the idea.
        console.log(JSON.parse(props.customer));
    }
}
</script>

Таким образом, вы сможете передать Object как задумано. Если это то, что вы ищете, пожалуйста, выберите меня как лучший ответ. Спасибо!

Answer 2

Передача произвольных данных (не определенных в определении маршрута как params) никогда не поддерживалась в Vue-router и никогда не работала должным образом. Проверьте мой ответ на вопрос, который вы связали

Ваш пример v1 работает только потому, что значение, определенное функцией маршрута, перезаписывает repository значение, переданное через params (который repository: "[object Object]" как видно в консоли)

Итак, если я понимаю это прямо, в конечном итоге вы не можете передать динамический объект, потому что он проанализирован, но вы можете передать статический объект?

Нет.

1. Вы не можете передать какой-либо объект, используя или (даже он «вроде работал» в Vue-router 3 - снова см. Мой связанный ответ)

2. Вы можете определить propsв определении маршрута как объект или как объект, возвращающий функцию, и его свойства будут переданы в реквизиты вашего компонента без какой-либо кодировки или чего-то еще. Но это сильно отличается от использования $router.push или же router-link поскольку данные поступают не из исходного маршрута, а из самого маршрутизатора ...