使用 vue 将数据传递到下一个路由

Question

在我的 vue 前端我有以下方法：

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'});
      }
    }
}

上述方法命中了以下方法，将数据从购物车集合移动到节点后端的订单集合，并从订单集合返回移动的数据：

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

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

我想在我的订单（视图或路线）中显示作为响应获得的数据。我可以将后端返回的数据传递到 Vue 中的下一个路由吗？

或者我需要在前端和后端创建单独的方法来从订单集合中获取数据吗？？

Answer 1

你可以在vue路由之间使用query or url parameters。但是，数据现在在 url 中公开，您现在将继承 url 要求的所有限制，例如长度和类型（url 编码字符串）。

一些解决方案更适用于您的问题：

1. 如您所述，如果第一次调用成功，您可以触发后续请求。
2. 将数据发送到目标视图/路由（注意数据只能流向up或down组件树）
3. （首选）使用像vuex 这样的状态管理工具来集中您的数据。您只需要更新（改变）您的数据（状态）一次，它就可以在您的应用程序中的任何地方使用。此解决方案的时间投入不容忽视，但从长远来看，它可以显着简化您的应用程序。