Vuejs + vue-router，像http一样在视图之间传递数据post

Question

我正在尝试使用 vue-router 在 Vuejs 视图之间传递数据。

//View1.vue
route: {
  data: function (transition) {
    transition.next({
      message: "this is it!!"
    });
  }
}

我通过单击操作按钮调用下一个视图：

//View1.vue
methods:{
  showResult: function(){
    this.$router.go('/View2');
  }
}

但是在下一个视图中没有填写数据：

//View2.vue
<template>
  <p>Message: {{ message }}</p>
</template>

有人知道我使用 vue-router 有什么问题吗？我认为我不需要为此通过服务，对吗？

欢迎在 jsfiddle（或 jsbin 等）上使用示例 :D

Answer 1

如果 View2 是子组件，您可以使用 props 传递它：

//View1.vue
<view2-component :passedData='message'></view2-component>

或者，我相信如果您在 View1 的 $route 对象上设置数据，因为该对象在所有 vue 实例之间共享，我相信它将在整个应用程序范围内可用。

//View1.vue
this.$router.myProps.message = message

但可以说共享数据的更好方法是使用 POJO - 普通的旧 javascript 对象并将其绑定到两个视图。为此，您通常需要一个共享状态对象，如果您愿意，可以为此使用 Vuex，尽管它比 POJO 稍微复杂一些。

Answer 2

我知道这已经得到解答，但如果有人在这里寻找一种方法将数据从路由器传递到路由，我会使用元数据。

不确定这是否是提问者的意思，但我认为是？我个人更喜欢这个而不是道具，因为我更习惯使用它。它允许轻松传递和接收数据而无需修改 children.

总之这里有一个片段 link!

import Vue from 'vue'
import Router from 'vue-router'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'Homepage',
      meta: {  
        logo:{
          "/imgs/Normal-Logo.png"
        }
      }
    },
    {
      path: '/admin',
      name: 'Admin',
      meta: {  
        logo:{
          "/imgs/Admin-Logo.png"
        }
      }
    },
  ]
})

任何 children 想要使用变量的人：

<logo :src="this.$route.meta.logo"/>

参考： https://router.vuejs.org/guide/advanced/meta.html

Vuejs + vue-router，像http一样在视图之间传递数据post

Vuejs + vue-router, pass data between views like http post

vue.js

vue-router