Question

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

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

我通过点击操作按钮调用下一个wiew：

//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

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

不确定这是发问者的意思，但我认为是吗？我个人更喜欢道具而不是道具，因为我更习惯使用它。它使数据易于传递和接收，而无需修改子级。

无论如何，这里都是摘录和链接！

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

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

2 个答案: