vue 实现列表跳转至详情且能添加至购物车功能

下面是“vue 实现列表跳转至详情且能添加至购物车功能”的攻略。该攻略的主要步骤如下：

1. 构建商品列表页
2. 构建商品详情页
3. 实现跳转及传参功能
4. 实现购物车功能

下面将详细介绍这些步骤。

构建商品列表页

首先需要构建一个商品列表页面，用于展示商品列表及其相关信息。可以使用v-for指令循环遍历商品数组，并通过router-link标签实现跳转到商品详情页。示例代码如下：

<template>
  <div>
    <h2>商品列表</h2>
    <ul>
      <li v-for="product in products" :key="product.id">
        <router-link :to="'/products/' + product.id">{{product.name}}</router-link>
        <p>{{product.price}}</p>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '商品1', price: 100 },
        { id: 2, name: '商品2', price: 200 },
        { id: 3, name: '商品3', price: 300 },
        { id: 4, name: '商品4', price: 400 },
        { id: 5, name: '商品5', price: 500 }
      ]
    }
  }
}
</script>

构建商品详情页

接下来需要构建一个商品详情页面，用于展示单个商品的详细信息。可以通过$route.params获取路由中的参数，并通过computed属性筛选与参数相对应的商品。示例代码如下：

<template>
  <div>
    <h2>{{product.name}}</h2>
    <p>{{product.desc}}</p>
    <p>{{product.price}}</p>
    <button @click="addToCart(product)">加入购物车</button>
  </div>
</template>

<script>
export default {
  computed: {
    product() {
      return this.products.find(product => product.id === parseInt(this.$route.params.id))
    }
  },
  data() {
    return {
      products: [
        { id: 1, name: '商品1', price: 100, desc: '这是商品1的描述' },
        { id: 2, name: '商品2', price: 200, desc: '这是商品2的描述' },
        { id: 3, name: '商品3', price: 300, desc: '这是商品3的描述' },
        { id: 4, name: '商品4', price: 400, desc: '这是商品4的描述' },
        { id: 5, name: '商品5', price: 500, desc: '这是商品5的描述' }
      ]
    }
  },
  methods: {
    addToCart(product) {
      this.$store.dispatch('addProductToCart', product)
    }
  }
}
</script>

实现跳转及传参功能

现在需要将商品列表页和商品详情页链接起来，并且传递商品的id参数。可以使用<router-link>实现跳转，并在to属性中指定路由路径和需要传递的参数。示例代码如下：

<router-link :to="{ name: 'ProductDetails', params: { id: product.id }}">查看详情</router-link>

同时还需要在路由定义中指定参数，示例代码如下：

{
  path: '/products/:id',
  name: 'ProductDetails',
  component: ProductDetails
}

实现购物车功能

最后需要实现购物车功能，可以使用Vuex来实现。首先需要创建一个store对象，并且定义一个状态cartProducts，用于存储购物车中的商品。示例代码如下：

const store = new Vuex.Store({
  state: {
    cartProducts: []
  },
  mutations: {
    addProductToCart(state, product) {
      const record = state.cartProducts.find(p => p.id === product.id)
      if (!record) {
        state.cartProducts.push({
          id: product.id,
          quantity: 1
        })
      } else {
        record.quantity++
      }
    }
  },
  actions: {
    addProductToCart({ commit }, product) {
      commit('addProductToCart', product)
    }
  },
  getters: {
    cartProducts: state => {
      return state.cartProducts.map(item => {
        const product = state.products.find(p => p.id === item.id)
        return {
          id: product.id,
          name: product.name,
          price: product.price,
          quantity: item.quantity
        }
      })
    }
  }
})

在商品详情页面中，可以在单击“加入购物车”按钮时调用addToCart方法，并将商品对象作为参数传递给addProductToCart操作。该操作将在store的cartProducts数组中添加或更新商品对象。还可以在getter中获取cartProducts和products数组，并创建一个新数组，用于存储购物车中商品的详细信息。

至此，我们已经完成了“vue 实现列表跳转至详情且能添加至购物车功能”的完整攻略。通过上述步骤，我们可以构建出一个完整的电商网站，并实现商品的查看、详情查看和添加购物车等功能。