组件复用，生命周期问题

路由组件在复用的时候切换路由时，因为组件的复用，导致不会走完整的生命周期，有些在 mounted 和 created 生命周期函数中的方法就不会执行，由此产生疑问，在组件中引入的子组件，在路由父组件切换的时候，子组件会不会走mounted 和 created

父组件1:

<template>
  <div>
    <span>我是父组件111</span>
    <Child></Child>
  </div>
</template>

<script>
import Child from './Child'
export default {
  components: { Child }
}
</script>

父组件2:

<template>
  <div>
    <span>我是父组件222</span>
    <Child></Child>
  </div>
</template>

<script>
import Child from './Child'
export default {
  components: { Child }
}
</script>

子组件:

<template>
  <div>
    <span>我是子组件</span>
  </div>
</template>

<script>
export default {
  mounted () {
    console.log('子组件的mounted方法执行了')
  },
  created () {
    console.log('子组件的created方法执行了')
  }
}
</script>

路由:

const routes = [
  {
    path: '/',
    name: 'Home',
    component: Home,
    children: [
      {
        path: '/parent1',
        component: Parent1
      },
      {
        path: '/parent2',
        component: Parent2
      }
    ]
  }
]

结果:

结论：父组件切换，子组件复用，子组件的 created 和 mounted 也会执行，可以做初始化工作，路由组件复用则不会。