Javascript Vue被调用了两次

我对vue路由器路由的子组件有一个问题，因为当我导航到其中一个组件时，该组件会被加载两次，因此我在该组件中的ajax请求会被执行两次。为什么会这样

源代码：

VerticalTabs.html组件：

<div>
    <h3 class="ml-4 mt-2 mb-2 primary--text flex">MENU</h3>
    <v-tabs vertical height="100%" style="overflow: auto;">
        <v-tab v-for="(tab, index) in tabs" :key="index" :to="tab.path" exact>
            <p class="ma-0 flex text-left">
                {{ tab.name }}
            </p>
        </v-tab>
        <v-tab-item v-for="(tab, index) of tabs" :key="index" :value="tab.path">
            <router-view :key="index"></router-view>
        </v-tab-item>
    </v-tabs>
</div>

import VueTypes from "vue-types";
export default {
  name: 'VerticalTabs',
  props: {
    tabs: VueTypes.arrayOf(
      VueTypes.shape({
        name: VueTypes.string.isRequired,
        path: VueTypes.string.isRequired
      })
    ).isRequired
  }
};

routes.js

...other routes
{
     path: "/",
     name: "athletes_main",
     component: MainAthlete,
     children: [
          {
               path: "/athletes",
               name: "athletes",
               component: Athletes
          },
          {
               path: "/athletes/requests",
               name: "athletes_requests",
               component: AthleteRequests
          }
    ]
}

maintactine.js组件文件：

import { VerticalTabs } from "@/components";

export default {
  name: 'MainAthlete',
  components: {VerticalTabs},
  data () {
    return {
      tabs: [
        {
          name: "ATHLETES",
          path: "/athletes"
        },
        {
          name: "ATHLETES REQUESTS",
          path: "/athletes/requests"
        },
      ]
    }
  },
}

main.html

<section class="main_athletes">
  <VerticalTabs :tabs="tabs" />
</section>

---

谢谢这是因为您的页面中有多个

组件

此

vue路由器

组件用于指示当前页面组件的位置。因此，如果你在“/athleters/requests”页面上，它将呈现你的

AthleteRequests

两次

因此，只要摆脱围绕

路由器视图的
v-for
循环，这样您就只有一个组件

此外，您还可以将“/atternates/requests”路线注册为“/atternates”的子路线。请参见“关于嵌套管线”部分

...
mounted(){
     //Ajax request...
}