this.$route.push({ params:{ id:this.data.hotelID } })

Puede obtener hotelID de $route.params docs y luego encontrar el hotel de datos necesario de Hotels.json por este $route.params.id . Manifestación

Hoteles.json

 { "hotels": [ { "id": 1, "name": "hotel 1" }, { "id": 2, "name": "hotel 2" }, { "id": 3, "name": "hotel 3" } ] }

enrutador.js

 const routes = [ { path: "/", name: "hotels", component: function () { return import("@/components/Hotels.vue"); } }, { path: "/hotel/:id", name: "hotel", component: function () { return import("@/views/Hotel.vue"); } } ];

aplicación.vue

 <template> <div id="app"> <div id="nav"> <router-link to="/">Hotels</router-link>| <template v-for="(item, key) in hotels"> <router-link :key="key" :to="`/hotel/${hotels[key].id}`">{{ hotels[key].name }}</router-link >| </template> </div> <router-view /> </div> </template> <script> import json from "./Hotels.json"; export default { name: "App", data() { return { hotels: json.hotels, }; }, }; </script>

hotel.vue

 <template> <div> <h1>{{ hotel.name }}</h1> </div> </template> <script> import json from "../Hotels.json"; export default { data() { return { hotels: json.hotels, }; }, computed: { hotel() { return this.hotels.find((item) => item.id === +this.$route.params.id); }, }, }; </script>