Guide to transferring array information from one Vuejs route to another

Question

I'm facing an issue with passing an array from one Vuejs route to another. Specifically, I need to pass the array from home.vue to post.vue.

In my route.js file for post.vue, I have:

{
  path: '/post/:cart',
  name: 'post',
  component: PostView,
  props: true
}

This is how I've structured my home.vue:

<router-link to="/post/:cart">Check out</router-link>

And in my post.vue:

props: ['cart'],
mounted () {
    console.log(this.$route.params.cart)
  }

However, when I try to access the data stored in cart, it simply prints ":cart" in the console instead of the actual data. What am I doing wrong?

Answer 1

Answer №1

By replacing

<router-link to="/post/:cart">Check out</router-link>

with

<router-link to="/post/test">Check out</router-link>

, the console will display test. This occurs because using :cart creates a placeholder for the parameter "cart" in the redirect.

If you wish to pass more parameters, you can attempt something similar to

<router-link :to="{ path: '/post/', params: { a: 'a', b: 'b', c: 'c' }}">Check out</router-link>

, but it may be necessary to modify your route.js by removing :cart.

Answer 2

By replacing

<router-link to="/post/:cart">Check out</router-link>

with

<router-link to="/post/test">Check out</router-link>

, the console will display test. This occurs because using :cart creates a placeholder for the parameter "cart" in the redirect.

If you wish to pass more parameters, you can attempt something similar to

<router-link :to="{ path: '/post/', params: { a: 'a', b: 'b', c: 'c' }}">Check out</router-link>

, but it may be necessary to modify your route.js by removing :cart.