[Vue] 路由懒加载

起初写 Vue Router 的时候，都是使用import在最前面提前引入路由组件，这样看起来很整齐，但是我发现，这样使用的话，貌似会导致网页初次加载变慢，网上查了一下，发现原来路由也可以按需引入

Vue官网：“Vue Router 支持开箱即用的动态导入，这意味着你可以用动态导入代替静态导入”

原来的写法

import Home from '@/pages/Home'
export default [{
    path: '/home',
    component: Home,
    meta: {
        show: true
    }
}]

使用按需引入的写法

let Home = () => import('@/pages/Home')
export default [{
    path: '/home',
    component: Home,
    meta: {
        show: true
    }
}]

从上面的语句可以看出，组件component可以接收一个返回promise的函数，这样就可以在初次使用到这个组件的时候，才会进行加载，之后还会缓存下来，无需进行第二次加载

当然，上面的写法还不够简洁精炼,推荐的写法就是，直接在component后面接箭头函数返回promise（如果函数内容很单纯的话）

export default [{
    path: '/home',
    component: () => import('@/pages/Home'),
    meta: {
        show: true
    }
}]

P.S:component跟箭头函数还有一个好处，因为跟的是函数，那么意味着里面可以做很多处理，比如根据特定条件展示不同的组件，毕竟component最终只需要接收一个promise