Vue 挂载调用两次

Question

我对 vue-router 路由的子组件有问题，因为当我导航到其中一个组件时，该组件被加载两次，因此我在所述组件中的 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>

VerticalTabs.js 组件：

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

路由.js

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

MainAthlete.js 组件文件：

import { VerticalTabs } from "@/components";

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

主要运动员.html

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

AthleteRequests.js

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

谢谢！ :D

Answer 1

那是因为您的页面中有多个<router-view>组件！

这个vue-router组件旨在指示您当前的页面组件应该在哪里渲染。 因此，如果您在“/athletes/requests”页面上，它将渲染您的AthleteRequests两次！

因此，只需摆脱围绕router-view组件的v-for循环，这样您就只有一个。

此外，您可以将“/athletes/requests”路由注册为“/athletes”的子路由。 请参阅有关嵌套路由的vue-router 文档。