Vue中如何将cart数组与total值作为Props传递到其他路由？

方法1：路由跳转时传递Props（适用于从HomeView跳转至CheckoutView的场景） #

在HomeView中添加跳转逻辑，通过$router.push携带购物车数据：

<!-- HomeView.vue -->
<template>
  <!-- 页面原有内容 -->
  <button @click="navigateToCheckout">前往结算</button>
</template>

<script>
import productsData from '@/assets/products.json';

export default {
  name: 'HomeView',
  data() {
    return {
      products: [],
      cart: [],
      total: 0,
    }
  },
  created() {
    this.products = productsData;
  },
  methods: {
    navigateToCheckout() {
      this.$router.push({
        name: 'checkout',
        props: {
          cart: this.cart,
          total: this.total
        }
      })
    }
  }
}
</script>

修改路由配置，开启props: true让CheckoutView接收传递的参数：

// router/index.js
const routes = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
  },
  {
    path: '/checkout',
    name: 'checkout',
    component: () => import('../views/CheckoutView.vue'),
    props: true // 开启props接收模式
  }
]

此时CheckoutView的原有props配置无需修改，即可直接拿到cart和total数据。

方法2：状态管理（适用于直接访问/checkout路由的场景） #

如果用户可能直接在地址栏输入/checkout访问（此时HomeView未加载，无法通过跳转传参），可以用Pinia或Vuex统一管理购物车状态。以Pinia为例：

1. 创建购物车状态仓库：

// stores/cart.js
import { defineStore } from 'pinia'

export const useCartStore = defineStore('cart', {
  state: () => ({
    cart: [],
    total: 0
  }),
  actions: {
    updateCart(newCart) {
      this.cart = [...newCart]
    },
    updateTotal(newTotal) {
      this.total = newTotal
    }
  }
})

2. 在HomeView中同步更新状态：

<script>
import productsData from '@/assets/products.json';
import { useCartStore } from '@/stores/cart';

export default {
  name: 'HomeView',
  setup() {
    const cartStore = useCartStore()
    return {
      cartStore
    }
  },
  data() {
    return {
      products: [],
      cart: [],
      total: 0,
    }
  },
  created() {
    this.products = productsData;
  },
  watch: {
    // 监听购物车变化，同步到状态仓库
    cart: {
      handler(newCart) {
        this.cartStore.updateCart(newCart)
      },
      deep: true
    },
    total(newTotal) {
      this.cartStore.updateTotal(newTotal)
    }
  }
}
</script>

3. 在CheckoutView中直接读取状态：

<script>
import { useCartStore } from '@/stores/cart';

export default {
  name: "CheckoutView",
  setup() {
    const cartStore = useCartStore()
    return {
      cart: cartStore.cart,
      total: cartStore.total
    }
  }
}
</script>

方法3：本地存储（简易方案） #

如果不想引入状态管理，可以用localStorage临时存储数据：

1. HomeView中同步数据到本地存储：

<script>
import productsData from '@/assets/products.json';

export default {
  name: 'HomeView',
  data() {
    return {
      products: [],
      cart: [],
      total: 0,
    }
  },
  created() {
    this.products = productsData;
    // 页面加载时恢复本地存储的数据
    const savedCart = localStorage.getItem('cart')
    const savedTotal = localStorage.getItem('total')
    if (savedCart) this.cart = JSON.parse(savedCart)
    if (savedTotal) this.total = Number(savedTotal)
  },
  watch: {
    cart: {
      handler(newCart) {
        localStorage.setItem('cart', JSON.stringify(newCart))
      },
      deep: true
    },
    total(newTotal) {
      localStorage.setItem('total', newTotal)
    }
  },
  methods: {
    navigateToCheckout() {
      this.$router.push('/checkout')
    }
  }
}
</script>

2. CheckoutView中读取本地存储的数据：

<script>
export default {
  name: "CheckoutView",
  data() {
    return {
      cart: [],
      total: 0
    }
  },
  created() {
    const savedCart = localStorage.getItem('cart')
    const savedTotal = localStorage.getItem('total')
    if (savedCart) this.cart = JSON.parse(savedCart)
    if (savedTotal) this.total = Number(savedTotal)
  }
}
</script>

内容的提问来源于stack exchange，提问作者russelhd