Vue-Router 使用 props 传递数据 [英] Vue-Router Passing Data with Props
问题描述
我很难使用 Vue-Router 传递道具.当我将它们带入下一个视图时，我似乎无法访问这些道具.这是我的方法对象:
方法:{提交表格() {让 self = this;轴({方法:'发布'，网址:url_here，数据:{电子邮件:this.email，密码:this.password},标题:{'内容类型':'application/x-www-form-urlencoded;字符集=utf-8'}}).then(函数(响应){self.userInfo = response.data;self.$router.push({name: '阅读理解', props: {GUID:self.userInfo.uniqueID }});})}}发布请求正在工作，但是当我尝试路由到一个新组件并传入一个 props 以在下一个组件中访问时，它说，
<块引用>属性或方法guid"未在实例上定义，但在渲染期间引用.确保声明反应性数据数据选项中的属性.
顺便说一下，我要路由到的组件如下所示:
<div class="grid-container" id="read-comp"><div class="row"><h1>造句:</h1>{{ GUID }}<脚本>导出默认{数据(){返回 {道具:['GUID']，}}}
当你以编程方式导航到新路由时，你应该使用params，而不是props.
self.$router.push({name: '阅读理解', params: {guid:self.userInfo.uniqueID }});其次，在你的路由定义中，你应该设置props 属性 为真.
{name: "阅读理解", 组件: SomeComponent, props: true }最后，在您的组件中，您将 props 与 data 分开定义，并且应该全部小写.
出口默认{道具:[指导"]，数据(){返回 {}}}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,
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 }});
Secondly, in your route definition, you should set the props property to true.
{name: "reading-comprehension", component: SomeComponent, props: true }
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 使用 props 传递数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
