2

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

4

2 回答 2

3

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

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

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

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

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

于 2016-05-19T13:25:27.213 回答
0

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

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

无论如何，这是一个片段和链接！

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

于 2019-10-29T14:12:19.483 回答