Vue-Router 使用 props 传递数据

Question

我很难使用 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 }});
      })
   }
}

post 请求有效，但是当我尝试路由到一个新组件并传入一个 props 以访问下一个组件时，它说，

Property or method "guid" is not defined on the instance but referenced during render. Make sure to declare reactive data properties in the data option.

顺便说一下，我路由到的组件如下所示：

<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'],
   }
 }
}

Answer 1

当您以编程方式导航到新路线时，您应该 use params, not props。

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

其次，在您的路由定义中，您应该将 the props property 设置为 true。

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

最后，在您的组件中，您将 props 与 data 分开定义，并且它应该全部小写。

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

Vue-Router 使用 props 传递数据

Vue-Router Passing Data with Props

vue.js

vue-router

vue-component

axios

vuejs2