vue页面 产品列表当前行跳转详情页，新增产品按钮跳转详情页

要实现产品列表当前行和新增产品按钮的跳转详情页，可以使用 Vue Router 的编程式导航。具体步骤如下：

1. 在产品列表中，为每一行设置点击事件，绑定一个方法。例如：

<template>
  <div>
    <table>
      <tbody>
        <tr v-for="product in products" :key="product.id" @click="goDetail(product.id)">
          <td>{{ product.name }}</td>
          <td>{{ product.price }}</td>
        </tr>
      </tbody>
    </table>
    <button @click="goNewProduct()">新增产品</button>
  </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 }
      ]
    }
  },
  methods: {
    goDetail(id) {
      this.$router.push({ name: 'ProductDetail', params: { id }})
    },
    goNewProduct() {
      this.$router.push({ name: 'NewProduct'})
    }
  }
}
</script>

在上面的代码中，我们为每一行设置了点击事件 `goDetail`，并为新增产品按钮设置了点击事件 `goNewProduct`。

2. 在路由配置中，定义产品详情页的路由和新增产品页的路由。例如：

const routes = [
  { path: '/', component: Home },
  { path: '/product/:id', name: 'ProductDetail', component: ProductDetail },
  { path: '/product/new', name: 'NewProduct', component: NewProduct }
]

其中，`:id` 表示动态路由参数，可以通过 `$route.params.id` 在产品详情页中获取当前行的 id。

希望这些步骤可以帮助您实现产品列表当前行和新增产品按钮的跳转详情页。