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

Question

I'm try to pass data between Vuejs views with vue-router.

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

I call next wiew with a click action button with:

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

but the data are not filled in the next view:

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

Does somebody knows what's wrong with my usage of vue-router? I don't think I need to pass through services for this, right?

Working examples on jsfiddle (or jsbin, etc) are welcome :D

Tremendus Apps · Accepted Answer · 2016-05-23T18:41:09.323

3

If View2 is a child component you can pass it using props:

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

Alternatively, I believe if you set data on the $route object from View1, since that object is shared between all vue instances, I believe it will be available application-wide.

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

But arguably the better way to share data is use a POJO - plain old javascript object and bind it to both views. To do this you typically need a shared state object and you can if you wish use Vuex for this although it is a little more complicated than a POJO.

edited May 23 '16 at 18:41

answered May 19 '16 at 13:25

Tremendus Apps

1,497
12
20

But where may I store this shared POJO... (parent vue?) I'm too new to vuejs to add an another layer in my code... :) – Stefano Nepa May 19 '16 at 14:34
because this doesn't work: this.$route.myProps.message = message – Stefano Nepa May 19 '16 at 14:41
sorry this works fine: $router.myProps.message = message – Stefano Nepa May 19 '16 at 14:43
For future readers (since this link shows up first in google search): it might not be advisable to set page data globally in this fashion. A better way to do this is to use props, as described here: https://stackoverflow.com/questions/45001503/vue-router-passing-data-with-props – verboze Jun 22 '18 at 15:32

score 0 · Answer 2 · answered Oct 29 '19 at 14:12

I know this has already been answered, but if someone is here looking for a way to pass data to a route from a router, I use Meta Data.

Not sure if this is what the questioner meant or not but I think it is? I personally prefer this to props just because I am more used to using it. It allows for data to be easily passed and received without having to modify children.

Anyway here is a snippit and 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"
        }
      }
    },
  ]
})

In any children who want to use vars:

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

Ref: https://router.vuejs.org/guide/advanced/meta.html

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

2 Answers2