Vue挂载调用了两次答案

【问题标题】：Vue mounted called twiceVue挂载调用了两次
【发布时间】：2021-01-09 23:53:36
【问题描述】：

我对 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
  }
};

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
          }
    ]
}

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"
        },
      ]
    }
  },
}

MainAthletes.html

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

AthleteRequests.js

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

谢谢！ :D

【问题讨论】：

您解决了这个问题吗？我有同样的问题。我对 Kapcash 的回应持怀疑态度，因为您和我一样遵循 Vuetify 示例。

标签： javascript vue.js vue-component vue-router

【解决方案1】：

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

这个vue-router 组件用于指示您当前页面组件的渲染器位置。因此，如果您在“/athletes/requests”页面上，它将渲染您的AthleteRequests 两次！

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

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

【讨论】：