Vue.js VueRouter 使用 Props 传递数据

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 }

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

Vue.js相关问答推荐

正在try 访问vutify中v-select(ItemProps)的嵌套json值

传单 vue3 组件变体打开错误的标记 - 单击时弹出

vue 不重新渲染数据更改

如果找不到路由，Vue.js如何重定向到公共路由

在 Vue 中启用(控制台)记录路由事件

使用 Laravel 作为后端刷新 Vue.js SPA 的身份验证令牌

将 Vue 应用程序挂载到主 Vue 应用程序的容器中

vuejs vue-cli 如何使用 console.log 而不会出现任何错误

在 vuejs 中显示两个组件，但只显示一个，为什么？

如何只查看数组中的一个对象？

Webpack 你可能需要一个合适的加载器来处理这个文件类型

为什么 vue 中的 @mouseover 操作不起作用

Vue&TypeScript：在项目目录外的 TypeScript 组件中实现导入时如何避免错误 TS2345？

Vuetify 单选按钮未显示为选中状态

请求正在进行时显示加载器

Vue路由安全

Vuex：无法读取未定义的属性'$store'

给 标签中的 href 赋值

Axios 请求拦截器在我的 vue 应用程序中不起作用

mount() 仅在组件 Vue.js 上运行一次