我如何在VueJS路由器中使用props发送此区域设置数据

Question

该路径必须为localhost:8080/hotel/:id (id = json. hotelid)

鸡蛋:localhost: 8080/酒店/101

和这个路径必须显示我自己的数据

我们应该使用VueJS vue-router

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

Answer 1

您可以从$route.params文档中获得hotelID，然后通过该$route.params.id从Hotels.json中找到所需的数据酒店。演示

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>

Answer 2

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