[Vuejs]-VueJS: Pass Data Between Routers

1๐Ÿ‘

โœ…

You can use dynamic param to pass data from one route
component to another.

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
  },
  {
    path: '/student/:messaged', // <-- [1] Add dynamic param
    name: 'student',
    component: Student,
    props: true
  }
]

Component A:

methods: {
 processForm: function () {
  this.$router.push({name: 'student', params: { messaged: 1 } }) // <-- [2] pass `messaged` as param instead of prop
 }
}

Component B:

methods: {
 checkForm: function() {
  console.log({ messaged: this.$route.params.messaged }) // <-- [3] excess in the other component via route param
 }
}

PS: In case of passing complex ds, consider using Vuex

๐Ÿ‘คShivam Singh

Leave a comment