Vue, есть ли способ передачи данных между маршрутами без URL-параметров?

Question

Я смотрю, как секретно передавать данные между двумя отдельными компонентами (не родительским и дочерним) без использования параметров URL в моем приложении Vue2. Это не значит, что я передаю секреты, но я просто не хочу, чтобы пользователь видел это (только из соображений пользовательского интерфейса).

Я знаю, что в Vue есть реквизиты, но они предназначены для передачи данных между родительским и дочерним компонентами. В моем случае мой URL изменится, но я не хочу передавать данные через видимые параметры.

Кто-то утверждал, что здесь используется реквизит без URL-параметров, но я не смог воспроизвести работающее решение (получая неопределенный каждый раз).

Я также проверил эти параметры, но все они используют либо URL, либо параметры запроса, которые, как мы знаем, являются видимыми.

Уродливым решением было бы записать данные в локальное хранилище, а затем прочитать их там, но это создает большие накладные расходы и сложность (например, если я хочу, чтобы эти данные читались только один раз, и т. Д.).

Есть ли более элегантное решение этой проблемы?

Спасибо!

Answer 1

1. make props: true для маршрута назначения - в файле index.js маршрутизатора

    {
      path: '/home',
      name: 'home',
      component: taskChooser,
      props: true,
      }

2. определить prop в компоненте, например, props: ['myprop'], - отметить кавычки

3. скопируйте переменную, которую вы хотите передать из исходного маршрута, в то же имя, что и ваш проп - в данном случае myprop

myprop = theVariableThatYouWantToPass

this.$router.replace({name:'home', params:{myprop}});

Убедитесь, что имя и переменная одинаковы - проп в кавычках.

Это работает для меня.

Answer 2

Спасибо @Mayank за указание в правильном направлении.

Вот правильный синтаксис, который работал для меня.

1. Обратите внимание на props В Индексе роутера

   {
     path: '/componentPath',
     name: 'componentName',
     props: {
        header: true,
        content: true
     },
   }
   

2. В компоненте, на который вы перенаправляете, определите реквизиты следующим образом:

   props: {
     myProperty: {
       type: <DATATYPE>
     },
   }
   

3. Выполните перенаправление следующим образом:

   this.$router.push({
     name: 'componentName',
     params: {
       myProperty: <VARIABLE>
     }
   })
   

4. Доступ реквизит с this. конвенция от created или в более позднем событии жизненного цикла.

В этом случае имя переменной и имя свойства не обязательно должны совпадать, поскольку это простая карта. Это соглашение об именах было бы любопытным выбором дизайна в любом случае.

Answer 3

Я не проверял это в Vue 2, но в Vue 3 вы можете передать строковый объект через реквизит при нажатии на ссылку:

1. Добавлять props: trueв ваш файл маршрутов, для маршрута.

                {
            path: 'receipt',
            name: 'receipt',
            component: () => import('../pages/Receipt.vue'),
            props: true,
            beforeEnter(to, from, next) {
                if (!to.params.receiptData) {
                    return next({
                        name: 'dashboard',
                        params: {
                            locale: from.params.locale ? from.params.locale : 'en',
                        },
                    });
                }
   
                return next();
            },
        },
   

2. Включите свой строковый объект в качестве параметра для router.push().

               const receiptData = {
            transferType: 'default',
            recipient: receiver.value.name,
            referenceNumber: '#B3423424234',
            amountSent: formAmount,
            transferFee: 0,
        };
   
        router.push({
            name: 'receipt',
            params: {
                receiptData: JSON.stringify(receiptData),
            },
        });
   

3. Объявите свойства как данные экземпляра в компоненте.

            <script setup>
    import { computed } from 'vue';
   
    const props = defineProps({
      receiptData: {
          type: String,
          required: true,
      },
    })
    console.log('receiptData', props.receiptData);
   
    const parsedReceiptData = computed(() => JSON.parse(props.receiptData));
   
    </script>
   

Я не проверял верхний предел размера, поэтому будьте осторожны, пропуская через него огромный объект, и вы заметите, что я показал beforeEnterпромежуточное ПО также на маршруте, потому что, если пользователь нажмет F5, чтобы обновить страницу, реквизиты будут потеряны, поэтому в моем случае я перенаправляю пользователя со страницы, потому что квитанция предназначена только для одноразового использования.