How can I send data from a component to another component by link?

Hello,

How can I send data from a component to another component by link?
Is this possible in Vue?

thanks,

Depends on the data. You can use query string params to pass along primitive data.

And for non-primitive you can use the mentioned string params to send a key for a (vuex) store in which the component will then find the referred data.

Do you mean Vue router?

Can you please send me a link or a simple example?

regards,

How do you currently create your “links”? Are you using vue-router?
Are you in a “plain” vue app or a nuxt app? Vue2 or Vue3?

Vue2 + Vue-Router example

In component A you “route” to the other page and pass a parameter, here value, along

this.$router.push({ path: '/somepath', query: { value: 'some-data' } });

and in component B you then read in the param like that

const value = this.$route.query.value; // -> 'some-data' 

But those parameters can only hold primitive values.
In case you want to pass a whole object you have to either stringify it and parse it on-read or you pass something like a “key” instead that allows you to retrieve the object via the key from e.g. a store.

2 Likes

@abernh looks to have covered it. This is the documentation to dynamic route params which can be used as a look up key as also discussed above.

You should go with string params

Thank you.

I use Vue3/ASP.net Core and Vue router.

Can I use this code for Vue3

See the users get the image after uploading it to the app.

    getList() {
            fetch('api/Image')
                .then(response => response.json())
                .then(data => this.fileList = data)

        }
    },
    mounted() {
        this.getList();
    }

I want to transfer the image to an Image Editor.
Should I write the click function and query string here? or in the template?
Please inform me.