Vue, is there a way to pass data between routes without URL params?

Question

I am looking how to pass data secretly between two separate components (not parent and child) without using URL params in my Vue2 app. This doesn\'t mean I am passing secret

Answer 1

Thanks @Mayank for pointing me in the correct direction.

Here is the correct syntax that worked for me.

1. Notice the props in In router index

   {
     path: '/componentPath',
     name: 'componentName',
     props: {
        header: true,
        content: true
     },
   }
   

2. In the component you are redirecting to, define the props as following:

   props: {
     myProperty: {
       type: <DATATYPE>
     },
   }
   

3. Perform redirect as following:

   this.$router.push({
     name: 'componentName',
     params: {
       myProperty: <VARIABLE>
     }
   })
   

4. Access props with the this. convention from created or in later lifecycle event.

In this case, the variable name and property name do not have to be the same as it is a simple map. That naming convention would be a curious design choice anyway.

Answer 2

1. make props: true for the destination route -- in the index.js file of router

    {
      path: '/home',
      name: 'home',
      component: taskChooser,
      props: true,
      }

2. define prop in the component e.g props: ['myprop'], - note the quotes

3. copy the variable you want to pass from the source route into the same name as your prop - in this case myprop

myprop = theVariableThatYouWantToPass

this.$router.replace({name:'home', params:{myprop}});

Make sure that the name of prop and variable are same - the prop is in quotes.

It's working for me.