如何在VueJS Router中通过props传递本地数据实现hotel/:id路由匹配对应数据

1. 路由配置开启props传参 #

首先在路由配置文件中开启路由参数的props传递能力，你可以根据需求选择以下两种方案：

// router/index.js 配置示例
import HotelDetail from '@/views/HotelDetail.vue'

const routes = [
  // 其他已有路由
  {
    path: '/hotel/:id',
    name: 'HotelDetail',
    component: HotelDetail,
    // 方案1：基础模式，仅将路由id参数作为props传入组件，数据匹配放在组件内做
    props: true
    // 方案2：高阶模式，直接在路由层匹配好对应酒店数据传入组件
    // props: route => {
    //   import hotelJson from '@/assets/data/Hotels.json'
    //   const targetHotel = hotelJson.find(item => item.hotelID === Number(route.params.id))
    //   return { hotel: targetHotel || null }
    // }
  }
]

2. 组件内逻辑处理（对应方案1，和你现有代码适配） #

如果选择方案1，直接在酒店详情组件中接收props，匹配对应数据即可：

// HotelDetail.vue 脚本部分
import json from "@/assets/data/Hotels.json";
export default {
  // 接收路由传入的id参数
  props: ['id'],
  data() {
    return {
      currentHotel: null
    };
  },
  mounted() {
    // 路由参数默认是字符串类型，要转成数字和JSON中的数值ID匹配
    // 注意：如果你的JSON中ID字段确实是hoteID（少了l的拼写），请替换下方hotelID为实际字段名
    this.currentHotel = json.find(item => item.hotelID === Number(this.id))
    // 可选：匹配不到数据时跳转404
    if(!this.currentHotel) this.$router.replace('/404')
  },
  // 可选：监听id变化，同一个组件切换不同酒店时自动更新数据
  watch: {
    id(newId) {
      this.currentHotel = json.find(item => item.hotelID === Number(newId))
    }
  }
}

3. 模板渲染数据 #

在组件模板中直接使用匹配到的酒店数据：

<template>
  <div class="hotel-detail">
    <div v-if="currentHotel">
      <h2>{{ currentHotel.name }}</h2>
      <p>酒店ID：{{ currentHotel.hotelID }}</p>
      <p>酒店地址：{{ currentHotel.address }}</p>
      <!-- 其他酒店属性按需渲染 -->
    </div>
    <div v-else>
      <p>未找到对应酒店信息</p>
    </div>
  </div>
</template>

注意事项 #

• 路由参数默认是字符串类型，匹配数值类型的酒店ID时必须做类型转换，否则会匹配失败
• 如果选择方案2，组件不需要导入本地JSON，只需要声明props: ['hotel']即可直接使用匹配到的完整酒店数据

内容的提问来源于stack exchange，提问作者Mahmut Serdar İset