vue-router中vue生命周期的顺序问题

Question

这是Vue的生命周期示例图

我在路由中分别定义A页面和B页面

A页面:

<template>
  <div>
    <router-link to="/test2">去B页面</router-link>
  </div>
</template>

<script>
  export default {
    beforeCreate(){
      console.log('A页面 beforeCreate');
    },
    created(){
      console.log('A页面 created');
    },
    mounted(){
      console.log('A页面 mounted');
    },
    beforeDestroy(){
      console.log('A页面 beforeDestroy');
    },
    destroyed(){
      console.log('A页面 destroyed');
    }
  }
</script>

B页面

<template>
  <div>
    <router-link to="/test1">去A页面</router-link>
  </div>
</template>

<script>
  export default {
    beforeCreate(){
      console.log('B页面 beforeCreate');
    },
    created(){
      console.log('B页面 created');
    },
    mounted(){
      console.log('B页面 mounted');
    },
    beforeDestroy(){
      console.log('B页面 beforeDestroy');
    },
    destroyed(){
      console.log('B页面 destroyed');
    }
  }
</script>

求解,为何会出现这样的打印顺序?
是Vue本身的原因还是Vue-router的加载原因?

Answer 1

没毛病啊。vue-router切换时会在新组件渲染好未挂载前B-beforeMounted，旧组件销毁A-destroyed，然后挂载新组件B-mounted