页面重新加载和直接 url 上的 Vue 渲染错误答案

【问题标题】：Vue render error on page reload and direct url页面重新加载和直接 url 上的 Vue 渲染错误
【发布时间】：2020-11-18 02:31:59
【问题描述】：

我是 Vue 新手，所以这可能是一个简单的解决方法。

我一直在关注 vueschool 的教程https://vueschool.io/courses/vue-router-for-everyone 使用相同的概念，但使用我自己的数据。然而，在本教程中，她使用 js 文件来处理她的数据，而我使用的是 JSON 文件。

我可以毫无问题地从主页导航到每个报告（详细信息页面）以及从一个报告到另一个报告。但是，如果我刷新页面或输入直接 URL，例如 http://localhost:8080/details/1，则不会加载任何数据，我会收到以下错误

[Vue warn]: Error in render: "TypeError: Cannot read property 'name' of undefined"
    
    found in
    
    ---> <Details> at src/views/Details.vue
           <App> at src/App.vue
             <Root>

主页仅详细信息页面不会发生这种情况

下面我列出了我的主要应用页面。我目前正在使用“历史”模式，我确实尝试将其删除以查看是否可以解决问题，但无济于事。

非常感谢任何帮助

干杯。

应用页面。

<template>
  <div id="app">
    <theNavigation />
    <router-view :key="$route.path" />
  </div>
</template>
<script>
import theNavigation from "@/components/theNavigation";
export default {
  components: {
    theNavigation
  }
};
</script>

主页。

<template>
  <div class="home">
    <div v-for="report in reports" v-bind:key="report.id">
      <div class="reports-container">
        <div class="reports-title-container">
          <h6>Report</h6>
          <h3>{{ report.name }}</h3>
          <router-link :to="{name: 'Details', params: {id:report.id}}">View details</router-link>
        </div>
        <div class="reports-text-container">
          <h6>Description</h6>
          <h3>{{ report.description }}</h3>
          <button class="btn">Read More</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import sample from "@/components/json/sample.json";
export default {
  name: "Home",
  components: {},
  data() {
    return {
      reports: sample
    };
  }
};
</script>

还有一个详情页

<template>
  <div class="details">
    <goBack />
    <div class="details-container">
      <div class="report-details-header">
        <div class="report-details-container">
          <div class="details-header">
            <h6>Report details</h6>
          </div>
          <div class="details-header2">
            <h3>{{ report.name }}</h3>
            <h3>ID: {{ report.id }}</h3>
          </div>
        </div>
        <div class="details-params">
          <div v-for="newparam in report.report_parameters" v-bind:key="newparam.parameter_id">
            <button class="btn">{{ newparam.parameter_name }}</button>

            <!-- <h5>{{ newparam.parameter_id }}</h5>-->
          </div>
        </div>

        <!--<h2>{{ report.description }}</h2>-->
        <!--  <a v-bind:href="report.report_url">URL</a>-->
      </div>
      <div class="report-details-data-container">
        <div v-for="newdata in report.report_data" v-bind:key="newdata.field_id">
          <div class="report-details-data">
            <div class="report-details-info">
              <h6>Field ID: {{ newdata.field_id }}</h6>
              <h3>{{ newdata.field_name }}</h3>
              <h3>{{ newdata.field_description }}</h3>
            </div>
            <div class="report-details-calc">
              <h3>{{ newdata.field_calculation }}</h3>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import sample from "@/components/json/sample.json";
import goBack from "@/components/goBack";
export default {
  name: "Details",
  components: {
    goBack
  },

  data() {
    return {
      reportId: this.$route.params.id
    };
  },

  computed: {
    report() {
      return sample.find(report => report.id === this.reportId);
    }
  }
};
</script>

这是我放在一起的示例 json 文件。

[
  {
    "id": 1,
    "name": "example title one",
    "description": "example description one",
    "report_url": "https://exampleurl.com",
    "report_data": [
      {
        "field_id": 1,
        "report_id": 1,
        "field_name": "course example one",
        "field_description": "course description one",
        "field_calculation": "N/A"
      },
      {
        "field_id": 2,
        "report_id": 1,
        "field_name": "course example two",
        "field_description": "course description two",
        "field_calculation": "N/A"
      }
    ],
    "report_parameters": [
      {
        "parameter_id": 1,
        "report_id": 1,
        "parameter_name": "para name one"
      },
      {
        "parameter_id": 2,
        "report_id": 1,
        "parameter_name": "para name two"
      },
      {
        "parameter_id": 3,
        "report_id": 1,
        "parameter_name": "para name three"
      },
      {
        "parameter_id": 4,
        "report_id": 1,
        "parameter_name": "para name four"
      },
      {
        "parameter_id": 5,
        "report_id": 1,
        "parameter_name": "para name five"
      },
      {
        "parameter_id": 6,
        "report_id": 1,
        "parameter_name": "para name six"
      },
      {
        "parameter_id": 7,
        "report_id": 1,
        "parameter_name": "para name seven"
      }
    ]
  },
 {
    "id": 2,
    "name": "example title one",
    "description": "example description one",
    "report_url": "https://exampleurl.com",
    "report_data": [
      {
        "field_id": 1,
        "report_id": 1,
        "field_name": "course example one",
        "field_description": "course description one",
        "field_calculation": "N/A"
      },
      {
        "field_id": 2,
        "report_id": 1,
        "field_name": "course example two",
        "field_description": "course description two",
        "field_calculation": "N/A"
      }
    ],
    "report_parameters": [
      {
        "parameter_id": 1,
        "report_id": 1,
        "parameter_name": "para name one"
      },
      {
        "parameter_id": 2,
        "report_id": 1,
        "parameter_name": "para name two"
      },
      {
        "parameter_id": 3,
        "report_id": 1,
        "parameter_name": "para name three"
      },
      {
        "parameter_id": 4,
        "report_id": 1,
        "parameter_name": "para name four"
      },
      {
        "parameter_id": 5,
        "report_id": 1,
        "parameter_name": "para name five"
      },
      {
        "parameter_id": 6,
        "report_id": 1,
        "parameter_name": "para name six"
      },
      {
        "parameter_id": 7,
        "report_id": 1,
        "parameter_name": "para name seven"
      }
    ]
  }
]

最后是我的 router.js

import Vue from "vue";
import VueRouter from "vue-router";
import Home from "../views/Home.vue";

Vue.use(VueRouter);

const routes = [
  {
    path: "/",
    name: "Home",
    component: Home,
  },

  {
    path: "/details/:id", // lowercase
    name: "Details",

    component: () =>
      import(/* webpackChunkName: "Details" */ "../views/Details.vue"),
  },
];

const router = new VueRouter({
  mode: "history", // removes # from url
  routes,
});

export default router;

【问题讨论】：

标签： javascript json vue.js routes vue-router

【解决方案1】：

我觉得问题可能出在这里

详情

computed: {
  report() {
    return sample.find(report => report.id === this.reportId);
  }
}

我认为它没有返回值。这令人惊讶，因为我希望它返回一个值，因为您的 JSON 样本中有一个值为 1 的报告。

因此，report.name 的值将是未定义的。在您的开发工具中确认计算属性 report 的值是什么。另外，确认this.$route.params.id的值，确保类型相同。

【讨论】：