Javascript 在Vue中单击“路由页面关于”时，数据正在清除

请帮帮我！我有两页：

主页

，

关于

和一个组件

第二页

。此组件有两个包含数据的表，应该显示在

关于

页面上。但当我导航到

About

页面时，所有数据都被清除，表格为空。 我试图在我的主页

主页
中将
关于
页面中的所有内容显示为
关于
组件，结果成功了！因此，道具的传递是正确的。
为什么我单击“关于”
页面时，表中的所有数据都会消失在该页面中？
我尝试了
.prevent
，但它没有像我预期的那样工作

关于.vue

<template>
  <div class="about">
    <h1>This is an about page</h1>
     <SecondPage v-bind:generalQuestInfo="generalQuestInfo" :isActive="isActive" :getIconClass="getIconClass" />
  </div>
</template>

<script>
import SecondPage from '../components/SecondPage'


export default {
  name: 'About',
  components: {
    SecondPage 
  },
  props: ["generalQuestInfo", "isActive", "getIconClass"]    
  }

  </script>

Vue文档表明

HTML属性名称不区分大小写，因此浏览器将解释
任何大写字符均为小写。这意味着当你使用
在DOM模板中，camelCased道具名称需要使用其kebab-cased
（以连字符分隔的）等效项：

然后，当你调用他的HTML模板中的某个组件时，你应该在烤肉串中编写道具：

<!-- kebab-case in HTML -->
<blog-post post-title="hello!"></blog-post>



在您的组件上，您必须调用您的道具：

Vue.component('blog-post', {
  // camelCase in JavaScript
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})

Vue.component（'blog-post'{
//JavaScript中的camelCase
道具：['postTitle']，
模板：“{postTitle}}”
})
我用
Vuex
添加了
store
，这个问题就解决了
 请提供
SecondPage.vue
和home。您也应该收到此错误
-您是否正确注册了组件？对于递归组件，请确保提供“name”选项。
及其名称，因为您使用的是大写字母。。。您需要将
更改为
我添加了一个代码。在Vue中使用大写字母是非常有效的。查看他们的文档中的多个示例：@Joseph我不是在谈论组件的第一个字母。。。一封来自中间的信（在第一封信之后）您可以尝试一下，看看是否没有抛出错误。那么，这对我的代码有什么影响？我没有看到错误，只是数据没有显示在
About
页面上。。。
<template>
    <div>
        <table align="center">
            <tr>
              <th v-bind:key="data.id" v-for="data in mainPageInfo">{{ data.alias }}</th>
            </tr>
            <tr>        
                <td v-bind:key="data.id" v-for="data in mainPageInfo">          
                    <router-link :to="data.status == 'SUCCESS' || data.status == 'CRASH' ? '/about' : '/no-info'"><i v-on:click="$emit('main-handle', data.status)" v-bind:class="data.status == 'SUCCESS' ? 'fas fa-check': 
                        data.status == 'CRASH' ? 'fas fa-times' : 
                                      'fas fa-minus'"></i></router-link>        
                </td>
            </tr>
        </table>
    </div>
</template>

<!-- kebab-case in HTML -->
<blog-post post-title="hello!"></blog-post>

Vue.component('blog-post', {
  // camelCase in JavaScript
  props: ['postTitle'],
  template: '<h3>{{ postTitle }}</h3>'
})