This path will must be localhost:8080/hotel/:id (id = json.hoteID)

Egg: localhost:8080/hotel/101

and this path must show me own datas

We should use VueJS vue-router

import json from "@/assets/data/Hotels.json";
data() {
    return {
      data: json,

    };
  },

CodePudding user response：

You can get hotelID from $route.params docs and then find needed data hotel from Hotels.json by this $route.params.id. Demo

Hotels.json

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

router.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");
    }
  }
];

App.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>

CodePudding user response：

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