JavaScript + Vue 错误：“无法读取未定义的属性（读取“名称”）”

Question

我正在使用 Vue CLI 学习本教程，在本视频的第二部分（从 4:30 开始）中编写代码时遇到错误。

我能够正确显示页面

http://localhost:8080/destination/

，但是当我尝试显示

http://localhost:8080/destination/1

时，我收到以下错误：

Cannot read properties of undefined (reading 'name')
TypeError: Cannot read properties of undefined (reading 'name')
    at Proxy.render (webpack-internal:///./node_modules/babel-loader/lib/index.js??clonedRuleSet-40.use[0]!./node_modules/vue-loader/dist/templateLoader.js??ruleSet[1].rules[3]!./node_modules/vue-loader/dist/index.js??

该消息让我认为错误发生在

index.js

，所以我将其包含在下面：

import { createRouter, createWebHistory } from "vue-router";
import HomeView from "../views/HomeView.vue";

const routes = [
  {
    path: "/",
    name: "home",
    component: HomeView,
  },
  {
    path: "/about",
    name: "about",
    component: () =>
      import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
  },
  {
    path: "/brazil",
    name: "brazil",
    component: () => import("../views/BrazilView.vue"),
  },
  // Code of other destinations is similar to the above, and thus omitted
  {
    path: "/destination/:id",
    name: "destination",
    component: () => import("../views/DestinationShow.vue"),
  },
];

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes,
  linkActiveClass: "active-link",
});

export default router;

我偶然发现了TypeError：无法读取未定义的属性（读取'id'）和TypeError：无法读取未定义的属性（读取'id'），但如果他们的任何答案解决了我的问题，我无法看看如何。

Answer 1

遇到同样的错误。对我来说，问题是，我忘记将

router

传递给

Vue

中的

src/main.js

实例。

import Vue from 'vue'
import App from './App.vue'
import router from './router'  // import router

//...

new Vue({
  router,  // <-- add router when creating the root vue instance
  render: h => h(App),
}).$mount('#app')