Vue.js 组件“mounted”在页面加载时触发两次

我有一个非常奇怪的错误，在页面上加载一个组件

mounted

和

beforeMount

fire/run两次？我的每个组件代表一个页面，因此，当我在

mywebsite.com/contact

上加载页面时，

contact.vue

函数

mounted

和

beforeMount

fire/run两次，但如果我在

mywebsite.com/foo

上加载页面，则

contact.vue

函数

mounted

和

beforeMount

fire/run一次（我认为这是应该发生的事）

你知道为什么这些函数会执行两次吗？我有一点挑剔的设置，但它对动态模板很有效

router/index.js

：

const router = new Router({
routes: [
  {
      path: (window.SETTINGS.ROOT || '') + '/:slug',
      name: 'Page',
      component: Page,
      props: true
  },
]
})

Page.vue:

<template>
  <component v-if="wp" :is="templateComponent" v-bind:wp="wp"></component>
  <p v-else>Loading...</p>
</template>

<script type="text/javascript">

import { mapGetters } from 'vuex'
import * as Templates from './templates'

// Map templates
let templateCmps = {}
_.each(Templates, cmp => {
  templateCmps[cmp.name] = cmp
})

export default {

props: ["slug"],

components: {
  ...templateCmps

  // Example:
  // 'default': Templates.Default,
  // 'contact': Templates.Contact,
  // 'home': Templates.Home,
},

computed: {
  ...mapGetters(['pageBySlug']),

  wp() {
    return this.pageBySlug(this.slug);
  },

  templateComponent() {
    let template = 'default' // assign default template

    if (!_.isNull(this.wp.template) && this.wp.template.length)
      template = this.wp.template.replace('.php','').toLowerCase()

    return template
  }
},

created() {
  this.$store.dispatch('getPageBySlug', { slug: this.slug })
}
}
</script>

<template>
    <main></main>
</template>

<script type="text/javascript">


export default {

    name: 'contact',

    mounted() {
      console.log('Contact::mounted') // this outputs twice
    },

    beforeMount() {
      console.log('Contact::beforeMount') // this outputs twice
    }
}

</script>

加载
从“vuex”导入{mapGetters}
将*作为模板从“./Templates”导入
//地图模板
让templateCmps={}
_.每个（模板，cmp=>{
templateCmps[cmp.name]=cmp
})
导出默认值{
道具：[“鼻涕虫”]，
组成部分：{
…模板CMPS
//例如：
//“默认”：模板。默认值，
//“联系人”：模板。联系人，
//“主页”：模板。主页，
},
计算：{
…映射器（['pageBySlug']），
wp（）{
返回此.pageBySlug（此.slug）；
},
templateComponent（）{
let template='default'//分配默认模板
if（！.isNull（this.wp.template）和&this.wp.template.length）
template=this.wp.template.replace（'.php'，''）.toLowerCase（）
返回模板
}
},
创建（）{
this.$store.dispatch（'getPageBySlug'，{slug:this.slug}）
}
}

Contact.vue:

<template>
  <component v-if="wp" :is="templateComponent" v-bind:wp="wp"></component>
  <p v-else>Loading...</p>
</template>

<script type="text/javascript">

import { mapGetters } from 'vuex'
import * as Templates from './templates'

// Map templates
let templateCmps = {}
_.each(Templates, cmp => {
  templateCmps[cmp.name] = cmp
})

export default {

props: ["slug"],

components: {
  ...templateCmps

  // Example:
  // 'default': Templates.Default,
  // 'contact': Templates.Contact,
  // 'home': Templates.Home,
},

computed: {
  ...mapGetters(['pageBySlug']),

  wp() {
    return this.pageBySlug(this.slug);
  },

  templateComponent() {
    let template = 'default' // assign default template

    if (!_.isNull(this.wp.template) && this.wp.template.length)
      template = this.wp.template.replace('.php','').toLowerCase()

    return template
  }
},

created() {
  this.$store.dispatch('getPageBySlug', { slug: this.slug })
}
}
</script>

<template>
    <main></main>
</template>

<script type="text/javascript">


export default {

    name: 'contact',

    mounted() {
      console.log('Contact::mounted') // this outputs twice
    },

    beforeMount() {
      console.log('Contact::beforeMount') // this outputs twice
    }
}

</script>

导出默认值{
姓名：'联系人'，
安装的（）{
console.log（'Contact:：mounted'）//此输出两次
},
beforeMount（）{
console.log（'Contact:：beforeMount'）//此输出两次
}
}

我也有类似的问题。我不是100%确定这一点，但我认为问题可能是由

vuex

引起的

vuex

有自己的

Vue

内部实例（在中被调用）。我的怀疑是，

Vue

的这个内部实例导致一些组件被重新创建，从而触发这些组件的生命周期事件不止一次

---

如果不在

vuex

中，是否可能正在创建多个

Vue

实例（即

新Vue（{}）

）在你的应用程序中？或者，是否有一些代码导致你的主

Vue

实例或

联系人

组件被多次初始化？这就是我所能想到的可能导致这种情况的原因。

尝试向

模板组件添加一个监视程序，看看该值是否有任何不必要的更改？或者简单地添加
console.log（template）
在
return template
之前，你能做一个JS提琴让我们看看发生了什么吗？试着打印出console.log（this.$vnode.tag）。这将显示组件名称和id；然后你可以检查是否有两个不同的组件被呈现。我曾经遇到过这个问题，我的项目的css框架（语义用户界面）两次呈现一些div，并将其中一个设置为“无”。这是一个棘手的混蛋。我的项目中没有vuex，我有一些特定的组件被安装了两次。此外，相同组件的其他实例也很好。还没有找到原因，我尝试使用“键”，但没有帮助