Pass data to next route with vue

Question

In my vue frontend I have the following method:

methods:{
    async moveToOrder() {
      const res = await this.$axios.get('/product/cart-to-order', {
        headers: {
          Authorization: 'Bearer ' + this.userData.userToken
        }
      });
      if (res.status === 200) {
        this.$router.push({name: 'Orders'});
      }
    }
}

The above method hits the following method that moves the data from cart collection to orders collection in the node backend and returns the moved data from orders collection:

exports.cartToOrder = async (req, res, next) => {
///method code goes here

res.status(200).json({products: products});
}

I want to display the data that I get as response in my orders (view or route). Can I pass data returned from backend to next route in Vue ?

Or do I need to make seperate methods on frontend and backend to fetch the data from orders collection ??

Does this answer your question? How do I pass data in $router.push in Vue.js? — Simon Dragsbæk
– Simon Dragsbæk, Commented Aug 31, 2020 at 13:42

tony19 · Accepted Answer · 2022-07-16 05:42:40Z

You can use query or url parameters between routes with the vue router. However, the data is now exposed in the url and you will now inherit all limitations from url requirements such as length and type (url encoded string).

A couple solutions are more applicable for your issue :

As you mentioned you could trigger a subsequent request if the first call is successful.
Emit the data to the destination view/route (note that the data can only flow up or down the component tree)
(Preferred) Use a state management tool like vuex to centralize your data. You will only need to update (mutate) your data (state) once and it will be available anywhere within your application. The time investment for this solution is not negligeable, however on a longer term it can simplify your application significantly.

Collectives™ on Stack Overflow

Pass data to next route with vue

1 Answer 1

Comments

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Linked

Related