'Ionic Vue pass Object via router-link

I want to pass an object as a prop to another page via a router-link in Ionic-Vue.

Nothing appears to be being passed in when I click on the link that I've created.

This is the link that I'm using.

<router-link :to="{ name: 'movieInfo', params: { movieInfo: movie }}"><h2>{{movie.Name}}</h2></router-link>

Index.js

      {
        name: 'movieInfo',
        path: 'movieinfo',
        component: () => import('@/views/MovieInfoPage.vue'),
        props: true
      },

Props field within the movieInfo page

  props:{
    movieInfo:{
      required: true
    }
  },

Is there something I'm doing wrong or should I handle this differently.

vue.jsionic-framework


Solution 1:[1]

You have to declare in your routes that this route take props and you have to declare your path like this

   path: '/movieinfo/:movieInfo',

movieInfo become a dynamic data and then you can pass it via router-link

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Sayf-Eddine

Related Questions