Router Push params 오류

🤔 어제 프로젝트를 하다가 발견한 바보같은 실수를 반복하지 않고자 글을 남긴다. Vue.js에서 다른 페이지로 이동하려면 $router.push를 통해서 이동이 가능하다. 여기서 나는 현재 페이지에서 다른 페이지로 이동할 때 현재 페이지에 있는 데이터를 넘겨주고 싶었다. 그래서 아래와 같은 방식으로 코드를 짰다. 

this.$router.push({
      name: "randomanswerdetail",
      params: {
        name: message.answer,
        mbti: message.mbti,
        user: message.userID,
        id: message.id,
   },
});

그리고 나서, 이동한 페이지에서 message.answer를 수정했다.

async completed() {
    try {
      if (this.content) {
          const formData = {
            id: this.$route.params.id,
            answer: this.content,
          };
          await axios.put(
            `/random/answer/update/${this.$route.params.id}`,
            formData,
            { withCredentials: true }
          );
        }
      } catch (error) {
        console.log(error);
      }
    this.$router.go(-1);
},

async await 문법을 이용해서 글의 내용을 업데이트 해주고 나면 this.$router.go(-1)를 해서 이전 페이지로 이동했다.

근데 문제가 생겼다❗️❗️ 

이전 페이지로 돌아가니 상태가 업데이트가 되지 않고 처음에 router.push할 때 params로 넘겨줬던 페이지에 갔다 오니 상태가 업데이트가 되는 이상한 일이 발생했다. 

문제는, params는 그것을 보내준 부모 페이지로 이동하지 않는 이상 데이터가 실시간으로 변하지 않는다는 사실이다. 그래서 알게된 사실은 params로는 id나 변하지 않는 값들을 넣어서 전달해주고 그게 아닌 것은 해당 페이지에서 get 요청을 통해 데이터를 받아오고 다시 put해서 데이터를 업데이트 해주는 방식으로 해야한다. 

 

 👉 수정 후(변하지 않는 값들만 전달)

selectMessage(message) {
     this.$router.push({
       name: "randomanswerdetail",
       params: {
         id: message.id,
         mbti: message.mbti,
       },
    });
 },