Vue + Vue router global lifecycle with a main route, a child route + a component inside the child route #vuejs

vue-vue-router-global-lifecycle.md

Vue + Vue router global lifecycle

with a main route, a child route + a component inside the child route

Legend

Item	Target
MAIN	main router-view
CHILD	child router-view
CHILD-COMPONENT	component inside child router-view

MAIN 1st ENTER (Home)

MAIN-----------------------------: beforeRouteEnter
--------CHILD--------------------: beforeRouteEnter
MAIN-----------------------------: beforeCreate
MAIN-----------------------------: created
MAIN-----------------------------: beforeMount
--------CHILD--------------------: beforeCreate
--------CHILD--------------------: created
--------CHILD--------------------: beforeMount
--------CHILD--------------------: mounted
MAIN-----------------------------: mounted
--------CHILD--------------------: beforeUpdate
MAIN-----------------------------: beforeUpdate
MAIN-----------------------------: updated
--------CHILD--------------------: updated
MAIN-----------------------------: beforeUpdate
MAIN-----------------------------: updated

---

COMPONENT 1st enter (News)

MAIN-----------------------------: beforeRouteEnter
--------CHILD--------------------: beforeRouteEnter
MAIN-----------------------------: beforeUpdate
MAIN-----------------------------: updated
--------CHILD--------------------: beforeUpdate
--------CHILD--------------------: updated
MAIN-----------------------------: beforeUpdate
MAIN-----------------------------: updated
--------CHILD--------------------: beforeUpdate
------------------COMPONENT: beforeCreate
------------------COMPONENT: created
------------------COMPONENT: beforeMount
------------------COMPONENT: mounted
--------CHILD--------------------: updated

---

COMPONENT 2nd enter (News)

MAIN-----------------------------: beforeRouteUpdate
--------CHILD--------------------: beforeRouteUpdate
MAIN-----------------------------: beforeUpdate
--------CHILD--------------------: beforeUpdate
------------------COMPONENT: beforeCreate
------------------COMPONENT: created
------------------COMPONENT: beforeMount
------------------COMPONENT: mounted
--------CHILD--------------------: updated
MAIN-----------------------------: updated
MAIN : updated d