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

Posted 2023-02-22

【中文标题】页面重新加载和直接 url 上的 Vue 渲染错误

【英文标题】：Vue render error on page reload and direct url

【发布时间】：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;

【参考方案1】：

我觉得问题可能出在这里

详情

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

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

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