# [Vue cli] 取得產品ID編號
###### tags: `Vue.js`

#### 目的是取得ID（$route.params.XXXid取得路由器裡的id編號）

### 用途：
為了取得單一產品的編號，以便在頁面開啟時能指向並呈現特定商品
經由取得產品資訊裡的id編號，傳入至路徑中，並在單一產品頁將路徑傳至變數，的產品id中，以取得此筆id的產品資訊

### 步驟
- 第一步驟：先透過A頁面裡導入的路徑中，新增取出的產品ID
- 第二步驟：再透過路由頁面裡的路徑自定義productID
- 第三步驟：在主頁面的接口處呼叫$route.params.productID取得資料，這邊可以選擇先回傳至data的變數中再匯入API裡，或者直接將API寫入取得公式裡

### 結論：
A頁面(API取得id) -> 路由路徑 -> B頁面(API傳入id)

## 案例比較

第一種情況是點擊時觸發函式，這裡要帶入產品的id參數（經由API取得的產品資料），再導入路由的指定頁面。

<button type="button" class="btn btn-outline-primary btn-sm" 
@click="goDetail(item.id)">
<i class="fas fa-spinner fa-spin" v-if="status.loadingItem === item.id"></i>
查看更多</button>

goDetail(id) {
        this.$router.push(`/product_detail/${id}`);
      }

第二種情況是點擊時觸發導入API的函式，並當成功時導入產品id再導入指定頁面裡，兩個情況基本上是一樣意思，都是先取得產品的id，再匯入路由裡，以完成上述的第一步驟流程。

 createOrder() {
        const vm = this;
        const url = `${process.env.APIPATH}/api/${process.env.CUSTOMPATH}/order`;
        const order = vm.form;
        //vm.isLoading = true;
        
        this.$validator.validate().then((valid) => {
          if (valid) {
            this.$http.post(url, {data: order}).then((res) => {
              if (res.data.success) {
                vm.$router.push(`/order_complete/${res.data.orderId}`); //傳至路徑，取得後端資料庫裡的orderId
                }
            });
          } else {
              console.log('欄位不完整');
          }
        });
      },
    },