Javascript Vue.js-can'；是否将此.$route.params.id存储在数据属性的变量中？

我正在使用Vue.js3。我这里有一个路由和发送参数的简单代码

这是我的Home.vue页面

<template>
  <div class="home">
    <h1>
      All Destinations
    </h1>
    <div class="destinations">
      <div v-for="destination in destinations" :key="destination.name">
        <router-link
          :to="{ name: 'DestinationDetails', params: { id: destination.id } }"
        >
          <h2>{{ destination.name }}</h2>
        </router-link>
        <figure>
          <router-link
            :to="{ name: 'DestinationDetails', params: { id: destination.id } }"
          >
            <img
              :src="require(`@/assets/${destination.image}`)"
              :alt="destination.name"
            />
          </router-link>
        </figure>
      </div>
    </div>
  </div>
</template>
<script>
// @ is an alias to /src
import store from "@/store.js";
export default {
  name: "home",
  components: {},
  data() {
    return {
      destinations: store.destinations
    };
  }
};
</script>
<style scoped>
.home {
  max-width: 1400px;
  margin: 0 auto;
}
img {
  max-width: 200px;
}
.destinations {
  display: flex;
  justify-content: space-between;
}
.vue-school-active-class {
  color: #ab26ab;
}
</style>

---

已更新

$route.params

默认返回

String

，其中

store.js

中的

id

是

Number

所以

 destination => destination.id === this.destinationId

永远也找不到结果

一个固定的方法可能是更改

id

的类型，或者将严格比较

==

更改为

=

不进行类型检查

或者您可以将

id

转换为

String

destination => destination.id === String(this.destinationId)

 destination => destination.id === this.destinationId

destination => destination.id === String(this.destinationId)