소품 포함 Vue-Router 전달 데이터

소품 포함 Vue-Router 전달 데이터

부에루터를 이용한 소품 전달에 어려움을 겪고 있다.소품들을 다음 시야로 가져오면 접근할 수 없을 것 같다.내 방법의 목적은 다음과 같다.

methods: {
    submitForm() {
      let self = this;
      axios({
        method: 'post',
        url: url_here,
        data:{
          email: this.email,
          password: this.password
        },
        headers: {
          'Content-type': 'application/x-www-form-urlencoded; charset=utf-8'
        }
      }).then(function(response) {
        self.userInfo = response.data;
        self.$router.push({name: 'reading-comprehension', props: {GUID:self.userInfo.uniqueID }});
      })
   }
}

포스트 요청이 작동하고 있지만, 새로운 컴포넌트로 라우팅을 시도하고 다음 컴포넌트에 접속하기 위해 소품을 전달하려고 하면 다음과 같이 되어 있다.

속성 또는 방법 "가이드"는 인스턴스에서 정의되지 않고 렌더링 중에 참조된다.데이터 옵션에서 반응형 데이터 속성을 선언하십시오.

그런데 내가 라우팅하고 있는 구성 요소는 다음과 같다.

<template lang="html">
  <div class="grid-container" id="read-comp">
    <div class="row">
      <h1>Make a sentence:</h1>
      {{ GUID }}
    </div>
  </div>
</template>

<script>
export default {
 data(){
   return {
     props: ['GUID'],
   }
 }
}

프로그래밍 방식으로 새 루트로 이동할 때는 소품이 아닌 를 사용해야 한다.

self.$router.push({name: 'reading-comprehension', params: {guid:self.userInfo.uniqueID }});

둘째로, 당신의 경로 정의에서 당신은 그 속성을 참으로 설정해야 한다.

{name: "reading-comprehension", component: SomeComponent, props: true }

마지막으로 구성 요소에서 정의하십시오.props와는 별도로data모두 소문자일 거야

export default {
 props: ["guid"],
 data(){
   return {
   }
 }
}

참조URL: https://stackoverflow.com/questions/45001503/vue-router-passing-data-with-props