用vue框架写代码，当没有购买商品时点击去购买如果已经购买跳转到list.vue页面

在 Vue 框架中，你可以通过条件渲染和路由导航来实现这个功能。假设你有一个组件 `ProductDetail.vue`，在这个组件中，你需要检查用户是否已经购买了商品。以下是基本步骤：

1. 首先，在 `ProductDetail.vue` 的模板部分（template），添加一个按钮，并用 v-if 或 v-show 来控制其显示：

<template>
  <div>
    <button @click="checkPurchase && goToBuyPage()" v-if="!isPurchased">去购买</button>
    <router-link :to="{ name: 'productList', params: { productId: product.id }}" v-show="isPurchased">
      已购买，跳转到列表页
    </router-link>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isPurchased: false,
      product: {} // 假设从服务器获取的商品信息
    };
  },
  methods: {
    checkPurchase(product) {
      // 这里假设你有异步数据获取逻辑，比如从 API 查询购买状态
      this.$http.get('/api/check-purchase', { params: { productId: product.id } })
        .then(response => {
          this.isPurchased = response.data.purchased;
        });
    },
    goToBuyPage() {
      // 在检查购买状态之前调用这个方法
      this.checkPurchase(this.product);
    }
  },
  // ...其他生命周期钩子和组件选项
};
</script>

2. 确保你已经在项目中设置了 Vue Router 并配置了名为 `productList` 的路由。

当你初次加载这个页面时，`checkPurchase` 方法不会立即执行，而是等待后台查询结果。一旦查询完成并更新了 `isPurchased` 属性，按钮的行为就会相应改变。