Vue钩子函数调用顺序的问题？

Question

之前看了一篇vue各种钩子函数调用顺序的文章https://segmentfault.com/a/11... 我照着作者的思路写了一个程序。测试出来的结果和文章的不一样，请各位帮忙解答。

router/index.js

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }, {
      path: '/test',
      name: 'test',
      component: resolve => require(['../test.vue'], resolve)
    }
  ]
})

test.vue内容同作者的一样，放在和App.vue平级的位置。

打印出来的顺序如下：
路由全局勾子：beforeEach
根组件：beforeCreate
根组件：created
根组件：beforeMount
根组件：mounted
组件路由勾子：beforeRouteEnter
路由全局勾子：afterEach
组件：beforeCreate
组件：created
组件：beforeMount
指令binding
指令inserted
组件：mounted
组件路由勾子beforeRouteEnter的next
nextTick

Answer 1

问题在于test.vue的加载方式，作者使用的是直接加载的方式

import Test from '@/test'
{
  path: '/test',
  name: 'test',
  component: Test
}

我使用的是懒加载的方式

import Vue from 'vue'
import Router from 'vue-router'
import HelloWorld from '@/components/HelloWorld'

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',
      name: 'HelloWorld',
      component: HelloWorld
    }, {
      path: '/test',
      name: 'test',
      component: resolve => require(['../test.vue'], resolve)
    }
  ]
})

Answer 2

提问懒成这样 舅扶你

Answer 3

我声望不够,要不我也下箭头