作为刚开始使用 Vue 3 的新手，我有一个关于路由器的问题。我正在按照 Vue School 上的教程操作。在使用命名路由和参数之前，它似乎没问题。它在控制台中呈现一个空白页，显示 Uncaught (in promise) TypeError: Cannot read property 'name' of undefined 。我注意到给出的默认代码与教程略有不同，但我认为这不是主要问题。我也在论坛上问过，但没有运气。

这是代码，我会尝试将项目最小化到可行代码。

[src/main.js]

// instantiate the App
import { createApp } from "vue";
import App from "./App.vue";
import router from "./router";
createApp(App).use(router).mount("#app");

[src/App.vue]

<template>
  <div id="app">
    <TheNavigation />
      <!-- In this single page, without router-view, views cannot render -->
    <router-view />
  </div>
</template>

<script>
import TheNavigation from "@/components/TheNavigation"
export default {
  name: "app",
  components: {
    TheNavigation
  },
}
</script>

[src/views/Home.vue]

<template>
  <div class="home">
    <h1>All Destination</h1>
    <div class="destinations">
      <div v-for="destination in destinations" :key="destination.name">
        <!-- the named routes will link to the components, and its params can access the properties -->
        <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>

[src/views/DestinationDetails.vue]

<template>
  <!-- should render the id -->
  <!-- <h2>The destination is: {{ this.$route.params.id }}</h2> -->
  <h2>The destination is: {{ $route.params.id }}</h2> <!-- turn out to be the correct way -->


  <section class="destination">
    <h1>{{ destination.name }}</h1> <!-- throw error, but ok in the tutorial -->
    <div class="destination-details">
      <img :src="require(`@/assets/${destination.image}`)" :alt="destination.name">
    </div>
  </section>
</template>
<script>
import store from '@/store.js'
export default({
  data() {
    return {
      // pass the route id to use dynamic routing in the router/index.js file
      destinationId:this.$route.params.id
    }
  },
  computed: {
    destination() {
      return store.destinations.find(
        destination => destination.id === this.destinationId
      )
    }
  }
})
</script>

[src/router/index.js]

import { createRouter, createWebHashHistory } from "vue-router";
import Home from "../views/Home.vue";

const routes = [
  {
    path: "/",
    name: "home",
    component: Home,
  },
  {
    path: "/brazil",
    name: "brazil",
    component: () => import(/* webpackChunkName: "brazil" */ '@/views/Brazil')
  },
  {
    path: "/details",
    name: "DestinationDetails",
    component: () => import(/* webpackChunkName: "DestinationDetails */ '@/views/DestinationDetails')
  }
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

export default router;

[src/views/Brazil.vue]

<template>
  <div>
    <h2>
      Brazil
    </h2>
  </div>
</template>

[src/store.js]

// shrink down to have basic information
export default {
  destinations: [
    {
      name: "Brazil",
      slug: "brazil",
      image: "brazil.jpg",
      id: 1
   } ]
   }

Edit1

感谢@Boussadjra Brahim 提供的路线问题，应该是 $route.params.id ，而不是 this$route.params.id 。

DestinationDetails.vue?d5a2:2 Uncaught (in promise) TypeError: Cannot read property 'name' of undefined
    at Proxy.eval (DestinationDetails.vue?d5a2:2)
    at renderComponentRoot (runtime-core.esm-bundler.js?5c40:1166)
    at componentEffect (runtime-core.esm-bundler.js?5c40:5201)
    at reactiveEffect (reactivity.esm-bundler.js?a1e9:42)
    at effect (reactivity.esm-bundler.js?a1e9:17)
    at setupRenderEffect (runtime-core.esm-bundler.js?5c40:5154)
    at mountComponent (runtime-core.esm-bundler.js?5c40:5113)
    at processComponent (runtime-core.esm-bundler.js?5c40:5071)
    at patch (runtime-core.esm-bundler.js?5c40:4673)
    at componentEffect (runtime-core.esm-bundler.js?5c40:5274)

现在问题仍然存在于 DestinationDetails 中，即 destination.name 未定义，但在教程中成功。我很抱歉重新排序并重新编辑帖子。