vue生命周期及router按需加载

Vue生命周期

=> 初始化实例

=> beforeCreated(此步不能调用数据及方法)

=> 实例创建完成(observer数据观测 属性和方法的运算 watch/event事件回调)

=> created

=> 检测页面内的el template并编译渲染

=> beforeMount

=> vm.$el替换el,挂载实例

=> mounted()

=> 检测数据是否发生改变

     发生改变时 => beforeUpdated

                        => 虚拟DOM重新渲染和打补丁

                        => updated

=> vm.$destroy回调

=> beforeDestroy

=> 销毁监听 子组件及事件监听

=> destroyed

 

同时,keep-alive的两个周期

=> activated(被 keep-alive 缓存的组件激活时调用)

=> deactivated(被 keep-alive 缓存的组件停用时调用)

进入页面中即可触发,与created不同

 

生命周期：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed

全局路由钩子：beforeEach、afterEach

组件路由钩子：beforeRouteEnter、beforeRouteUpdate、beforeRouteLeave

指令的周期： bind、inserted、update、componentUpdated、unbind

beforeRouteEnter的next所对应的周期

nextTick所对应的周期

 

Vue按需加载(又称懒加载)

{
  path: '/index',
  name: 'index',
  component: () => import('@/index')
}

　　

router的路径,跳转router.push({ path: `/product/${item.id}` })

{
  path: '/product/:id',
  name: 'product',
  component: () => import('@/ProductDetail')
}

 

router路径跳转前处理：

const router = new Router({
   base: path.join('/', pathName, '/'),
   routes  
})

router.beforeEach((to, form, next) => {
   if(to.mathed.length === 0) {
        let name = to.name;
        next({
            path: 'NotFound',// NotFound为页面中NotFound页面
            query: item.name // item.name为想要跳转的页面的名字
        })
    } else {
        window._axiosPromiserArr && window._axiosPromiseArr.forEach((cancel, index) => {
            cancel();// 路由跳转之前，把上一个页面的请求都清除
            delete window._axiosPromiserArr[index];
        })
        next();
    }
})