Vue-Router通过道具传递数据 [英] Vue-Router Passing Data with Props

问题描述

我很难用Vue-Router传递道具.将道具带入下一个视图时，我似乎无法访问它们.这是我的方法对象:

I am having a hard time passing props using Vue-Router. I seem to not be able to access the props when I bring them into the next view. This is my methods object:

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 }});
      })
   }
}

发布请求有效，但是当我尝试路由到新组件并传递道具以访问下一个组件时，它说，

The post request is working, but when I try to route to a new component and pass in a props to access in the next component, it says,

属性或方法"guid"未在实例上定义，但 在渲染期间引用.确保声明反应性数据 数据选项中的属性.

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.

顺便说一下，我要路由的组件看起来像这样:

By the way, the component that I am routing to looks like this:

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

推荐答案

以编程方式导航到新路线时，您应该

When you navigate to the new route programmatically, you should use params, not props.

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

第二，在路由定义中，应设置 props属性为true.

Secondly, in your route definition, you should set the props property to true.

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

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

Finally, in your component, you define props separately from data and it should be all lower case.

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

这篇关于Vue-Router通过道具传递数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！