passing props data to component which i can only access with routes

Question

My router file

import DomainAction from './components/domainaction/DomainAction.vue'
...
{ path: '/domainaction' , component: DomainAction },
...

router link File

...
<router-link to="/domainaction" tag="li" class="list-group-item "class-active="active" exact > Domain Action</router-link>
...

From another routes going to the domainaction Route like this

...

itemAction(action,data){
          if(action=='Suspend'){
            this.$router.push('/domainaction')
          }
        }
...

My Actual DomainAction component

<template>
.......
</template>
<script>
export default {
  props:['data'],
  data(){
    return{
.........
</script>

I want to pass data props from itemAction function . How do i achieve this ? I'm new to vue js .Sorry if my question is not very complete.

Answer 1

Note that sosmii is right about using a Vuex to share data across components.

But if you're looking into pass soma data as params using routes, you have to change a little bit how you're defining the components routes. Using a routers params you would be able to pass props, then you can push the route and add params. See example below.

And related question: Passing props with programmatic navigation Vue.js

const DomainActionA = {
  props: ['dataProp'],
  template: '<div>A data: {{dataProp}}</div>'
 }
const DomainActionB = {
  props: ['dataProp'],
  template: '<div>B data: {{dataProp}}</div>'
 }

const routes = [
  {
    path: '/DomainActionA/:dataProp',
    name: 'domainA',
    component: DomainActionA,
    props: true },
  { 
    path: '/DomainActionB/:dataProp',
    name: 'domainB',
    component: DomainActionB,
    props: true
   }
]

const router = new VueRouter({
  routes
})

const app = new Vue({
  router,
  methods: {
    goToA() {
       this.$router.push({name: 'domainA', params: {dataProp: "blah"}})
    },
    goToB() {
       this.$router.push({name: 'domainB', params: {dataProp: "bleh"}})
    }
  }
}).$mount('#app')

<script src="https://unpkg.com/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-router/dist/vue-router.js"></script>
<div id="app">
  <h1>Hello Router!</h1>
  <div>
   <button @click="goToA()">Go A with params: { data: "blah" }</button>
   <button @click="goToB()">Go B with params: { data: "bleh" }</button>
  </div>
  <div>
    <h2>router view</h2>
    <router-view></router-view>
  </div>
</div>

Answer 2

you should use vuex

props are designed to pass variables from a parent component to child components,
so it is unusual to use it when you want to share data between pages.

an example of right usage of prop:
parent.vue

<child-component :data="data">
<child-component :data="anotherData">

so, if you want to share variables between pages, use vuex (store pattern) instead.

similar question:
https://stackoverflow.com/a/40955110/10440108

Answer 3

Well if you just need to pass a property (a value) to the component, you just need to use data passing via the router's props: https://router.vuejs.org/guide/essentials/passing-props.html#function- mode. And receive using this.$router within the component. Alternatively you can use the Vuex for data passing. https://vuex.vuejs.org/ So that you can make a communication between components outside this form that was informed, both components have to be parent and child, ie, 1 calls the other inside it, so yes you can pass the values, otherwise it should be used, or the data path via route, or via vuex which is the vue status manager. There is also the following possibility, as requested in this question. Passing props to Vue.js components instantiated by Vue-router