Как передать параметры с router.pu sh в vue. js? - PullRequest
Новая
       54

Как передать параметры с router.pu sh в vue. js?

0 голосов
/ 09 июля 2020

Я работаю над приложением vue. js. Я пытаюсь передать параметры при перенаправлении от одного компонента к другому следующим образом: 

      this.$router.push({
        path: '/my-path',
        query: {
          anArray: [...]
        }
      });

После загрузки компонента по моему пути я могу получить такие параметры: 

const theArray = this.$route.query.anArray;

Проблема в том, что как только я обновляю sh страницу, параметры исчезают. Когда я открываю Chrome DevTools и устанавливаю точку останова, в которой я извлекаю массив из $ route.query, я вижу следующее: 

0: "[object Object]"
1: "[object Object]"
2: "[object Object]"

Кажется очевидным, что он получает это из URL-адреса, который: 

http://localhost:8080/my-path?anArray=%5Bobject%20Object%5D&anArray=%5Bobject%20Object%5D&anArray=%5Bobject%20Object%5D

Кажется, он не понимает, что термины «объект» в URL-адресе - это просто кодировки реальных объектов, которые доступны из $ route.query при первой загрузке.

Есть ли другой способ передать параметры компоненту с помощью $ router.pu sh (), чтобы параметры сохранялись на странице даже после обновления?

Я мог бы просто попробовать: 

this.$router.push('/my-path?anArray=[...]');

... но моя цель - скрыть параметры от пользователя (поэтому не показывайте их в URL-адресе). Это еще одна причина, по которой я ищу альтернативный способ передачи параметров (он даже не скрывает их).

Я также пробовал: 

      this.$router.push({
        path: '/my-path',
        params: {
          anArray: [...]
        }
      });

... но это сделало параметры, недоступные в компоненте (интересно, имеет ли это какое-либо отношение к нашему глобальному маршрутизатору, который направляет '/ my-path' в компонент MyPath без указания параметров; уничтожает ли он параметры?).

Спасибо.

1 Ответ

0 голосов
/ 12 июля 2020

Если вы хотите скрыть параметры от пользователя, вы не должны использовать запрос. Вместо этого вы должны использовать параметры. Вот пример: 

//routes.js
path: '/:data',
name: 'Home',
component: () => import('pages/YourPage.vue')

//Passing parameters
this.$router.push({
      name: 'Home',
      params: { data: yourData}
    });

//Receiving parameters in Home component
created() {
    console.log('Params: ', this.$route.params);
}

Надеюсь, это может быть полезно

...