Vue.js 如何使用 vuejs 在浏览器 url 中获取当前 product.id 的详细信息

我正试图在我的浏览器url中显示{{product.title}}，请问我该怎么做

这是我的json对象

{
    "status": true,
    "product": {
        "_id": "625672a8370e769a8a93a51e",
        "title": "galaxy note",
        "description": "Lorem ",
    }
}

这是我的脚本标签

<script>

import axios from "axios";
export default {
  data() {
    return {
      product: []
    };
  },
  mounted() {
    axios
      .get(`http://localhost:5000/api/products/${this.$route.params.id}`, {})
      .then(response => {
        console.log(response);
        this.product = response.data.product;
      })
      .catch(error => {
        error;
      });
    axios
      .get(`http://localhost:5000/api/products`, {})
      .then(response => {
        console.log(response);
        this.product = response.data.product;
      })
      .catch(error => {
        error;
      });
  },
};
</script>

这是我的路由

  {path: "/products/:id", name: "Product", component: Product},

这是我go id路由的方式

 <router-link :to="`/products/${product._id}`">
          <img
            :src="product.photo"
            alt="Placeholder image"
          >
        </router-link>

默认情况下，它会显示http://localhost:8080/products/625672a8370e769a8a93a51e在我的url中，如何显示http://localhost:8080/products/galaxy-注释