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

时间：2020-09-09 18:53:09 阅读：44 评论：0 收藏：0 [点我收藏+]

标签：rip enter bsp 配置技术 upd 好的 res console

1. vue-router 在 Vue 中的生命周期：

这是 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>

从 A 页面跳到 B 页面：

技术图片