передаю параметр по клику через router.push в другой компонент, но при обновление этого компонента параметры слетают. как быть?

вот обработчик , где передаю параметр

onViewClickHandler(id) {
       this.$router.push({ name: 'view', params:{ id }, query:{id:id}}) 
    },

вот в этом компоненте принимаю его через пропс

data: () => ({
    Country: {},
     
    
  }),
 
  props:{
    id:{
      type: Number,
      required:true,
      
    }
  },
  mounted: function (){
        this.$axios
        .get("/site/view", { params: {id: this.id}})
        .then((response) => {
           console.log(response.data);
          this.Country = response.data;
        });
      },

все работает нормально , до момента обновления страницы. Получается , что я передаю параметр по клику, при обновлении страницы клика не происходит и параметр не передается , как быть? введите сюда код


Ответы (1 шт):

Автор решения: peperoneen

Вам нужно хранить передаваемый параметр в самом роуте, а не передавать его в методе, потому что в случае с передачей через push() этот параметр будет передан только в случае срабатывания push(), чего не происходит при обновлении страницы, следовательно вам необходимо хранить query и получать его в самом компоненте из this.$route.query["свойство"].

Использование query для хранения данных влияющих на отображение также полезно тем, что при передаче ссылки, содержащей данные текущего отображения пользователь увидит её так же, как и вы.

→ Ссылка