Vuejs + vue-router，在视图之间传递数据，如 http post答案

【问题标题】：Vuejs + vue-router, pass data between views like http postVuejs + vue-router，在视图之间传递数据，如 http post
【发布时间】：2016-09-16 09:02:38
【问题描述】：

我正在尝试使用 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

【问题讨论】：

标签： vue.js vue-router

【解决方案1】：

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

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

这里有一个片段和链接！

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"
        }
      }
    },
  ]
})

在任何想要使用 vars 的孩子中：

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

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

【讨论】：

【解决方案2】：

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

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

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

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

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

【讨论】：

但是我可以在哪里存储这个共享 POJO...（父 vue？）我对 vuejs 太陌生，无法在我的代码中添加另一个层...:)
因为这不起作用：this.$route.myProps.message = message
对不起，这工作正常：$router.myProps.message = message
对于未来的读者（因为此链接首先出现在 google 搜索中）：以这种方式全局设置页面数据可能是不可取的。更好的方法是使用 props，如下所述：stackoverflow.com/questions/45001503/…