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-23 18:41:09Z

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, 2016 at 18:41

answered May 19, 2016 at 13:25

Tremendus Apps

1,59512 silver badges22 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Stefano Nepa Over a year ago

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 Over a year ago

because this doesn't work: this.$route.myProps.message = message

Stefano Nepa Over a year ago

sorry this works fine: $router.myProps.message = message

verboze Over a year ago

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: stackoverflow.com/questions/45001503/…

Justin · Accepted Answer · 2019-10-29 14:12:19Z

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

Collectives™ on Stack Overflow

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

2 Answers 2

4 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

4 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related