How to show index number in the URL (Now I got "[object%20Object]") and inside specific item?

Now creating e-commerce mockup,

Development Environment Mac, Node.js, Vue.js

What I want to do

After Click "Detail" button in My Orders page(photo1), it goes to Order Detail Page(Photo2)

1) In the Order Detail Page(Photo2), URL is "/orders/[object%20Object]", I would like to change it to "/orders/0" when I click detail button orderId 0 in the My Orders Page(Photo1). when it is 1, then url is "/orders/1"

2) In the Order Detail Page(Photo2), it should only shows OrderId 0 when you clicked order 1

3) In the Order Detail Page(Photo2), I want to see price, qty, amount that saved in items.

GET /user/orders/{orderId} Returns specific order, structure is the same as cart

What I want to achieve is like the last picture (photo3)

My Orders Page↓(Photo1)

Order Detail Page↓（Photo2）

the last picture「Order　Detail Page」 ↓(photo3) this is what I want to achieve.

OrderDetail.vue↓

<template>
<div class="OrderListing">
  <h2>Order Detail</h2>
  <table class="table">
    <tr>
      <th>OrderId</th>
      <th>Product</th>
      <th>Price</th>
      <th>qty</th>
      <th>Amount</th>
    </tr>

    <tr v-for="(order, index) in this.orders" :key="order.id">
      <td></td>
        <div v-for="item in order.items" :key="item.productId">
        <td>
          <img :src="item.optionImage" class="option-image" />
        </td>
        </div>
        <td>Here should be 「item.price」</td>
        <td>Here should be 「item.qty」</td>
        <td>Here should be 「item.total」</td>
    </tr>
    <tr class="total-row">
      <td>TOTAL:</td>
      <td></td>
      <td></td>
      <td></td>
      <td></td>
    </tr>

  </table>



</div>
</template>

<script>
import axios from "axios";
export default {
  name: 'OrderListing',
  computed: {
    items: function() {
      return this.$root.$data.cart.items || [];
    },
    total: function() {
      let sum = 0
      for (const item of this.items) {
        sum += item.total
      }
      return sum
    }
  },
  props: {
    order: Object
  },
  data: function() {
    return {
      orders: []
    }
  },
  mounted() {
    axios.get("https://euas.person.ee/user/orders")
      .then(response => {
        this.orders = response.data;
      });
  }
//or can be ""https://euas.person.ee/orders/"+ this.$route.params.orderId"
}
</script>


<style scoped>
.option-image {
  max-height: 75px;
  max-width: 150px;
}
</style>

ｍain.js↓

import Vue from 'vue'
import App from './App.vue'
import BootstrapVue from 'bootstrap-vue'
import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'
import VueRouter from 'vue-router'
import MainPage from './components/MainPage.vue'
import ProductPage from './components/ProductPage.vue'
import Category from './components/Category.vue'

import axios from "axios";
import ShoppingCartPage from './components/ShoppingCartPage.vue'
import OrderListing from './components/OrderListing.vue'
import OrderDetail from './components/OrderDetail.vue'


Vue.config.productionTip = false
Vue.use(BootstrapVue)
Vue.use(VueRouter)

const router = new VueRouter({
  routes: [{
      path: '/',
      component: MainPage
    },

    {
      path: '/categories/:categoryAlias',
      component: Category
    },
    {
      path: '/products/:productId',
      component: ProductPage
    },
    {
      path: '/cart',
      component: ShoppingCartPage
    },
    {
      path: '/order',
      component: OrderListing
    },
    {
      path: '/orders/:orderId',
      component: OrderDetail
    }
  ],
  mode: 'history'
});

axios.defaults.headers.common['Authorization'] = 'Bearer pasuwaado135@gmail.com';

if (localStorage.cartId) {
  axios.get("https://euas.person.ee/user/carts/" + localStorage.cartId).then(response => {
    new Vue({
      render: h => h(App),
      router: router,
      data: {
        cart: response.data,
        saveCart() {
          axios.put("https://euas.person.ee/user/carts/" + this.cart.id, this.cart)
        },
        reinitCart() {
          axios.post("https://euas.person.ee/user/carts/").then(response => {
            localStorage.cartId = response.data.id
            this.cart = response.data;
          });
        }
      }
    }).$mount('#app')
  });
} else {
  axios.post("https://euas.person.ee/user/carts/").then(response => {
    new Vue({
      render: h => h(App),
      router: router,
      data: {
        cart: response.data,
        saveCart() {
          axios.put("https://euas.person.ee/user/carts/" + this.cart.id, this.cart)
        },
        reinitCart() {
          axios.post("https://euas.person.ee/user/carts/").then(response => {
            localStorage.cartId = response.data.id
            this.cart = response.data;
          });
          axios.post("https://euas.person.ee/user/carts/" + this.cart.id + "/orders/").then(response => {
            localStorage.cartId = response.data.id
            this.cart = response.data;
          });
        },
        getOrders(){
          axios.get("https://euas.person.ee/user/orders/").then(response => {
            localStorage.orderId = response.data.id
            this.cart = response.data;
          })
        }
      }
    }).$mount('#app')
  });
}

To be safe,

OrderListing.vue↓

<div class="OrderListing">
  <h2>My Orders</h2>
  <table class="table">
    <tr>
      <th>OrderId</th>
      <th>Products Quantity</th>
      <th>Action</th>
    </tr>

    <tr v-for="(order, index) in this.orders" :key="order.id">
      <td></td>
        <div v-for="item in order.items" :key="item.productId">
        <td>
          <img :src="item.optionImage" class="option-image" />
        </td>
        <td>Quantity : </td>
        </div>
      <td>
        <b-button variant="dark" :to=" '/orders/' + order">Detail</b-button>
      </td>
    </tr>

  </table>



</div>
</template>

<script>
import axios from "axios";
export default {
  name: 'OrderListing',
  computed: {
    items: function() {
      return this.$root.$data.cart.items || [];
    },
    total: function() {
      let sum = 0
      for (const item of this.items) {
        sum += item.total
      }
      return sum
    }
  },
  props: {
    order: Object
  },
  data: function() {
    return {
      orders: []
    }
  },
  mounted() {
    axios.get("https://euas.person.ee/user/orders")
      .then(response => {
        this.orders = response.data;
      });
  }
}
</script>


<style scoped>
.option-image {
  max-height: 75px;
  max-width: 150px;
}
</style>