vue 如何实现加入购物车并显示在结算页面

要实现加入购物车并显示在结算页面的功能，需要以下步骤：

1. 在 Vue 组件中定义一个数组，用于存放购物车中的商品信息。

data() {
  return {
    cart: []
  }
}

2. 在商品列表中，为每个商品添加一个“加入购物车”按钮，并绑定一个点击事件。

<button @click="addToCart(item)">加入购物车</button>

3. 在点击事件中，将商品信息添加到购物车数组中，并跳转到结算页面。

methods: {
  addToCart(item) {
    this.cart.push(item)
    this.$router.push('/checkout')
  }
}

4. 在结算页面中，使用 v-for 指令遍历购物车数组，并展示每个商品的信息。

<div v-for="item in cart">
  <p>{{ item.name }}</p>
  <p>{{ item.price }}</p>
</div>

这样就可以实现简单的加入购物车并显示在结算页面的功能了。当然，实际开发中还需要考虑一些细节问题，比如商品数量、重复添加等情况。另外，结算页面的路由和组件需要在 Vue Router 中进行配置。