Vue-router 路由懒加载

路由懒加载也叫延迟加载

现在路由使用情况

import Home from '../views/Home.vue'
import Sport from '../views/Sport.vue'
let router = new VueRouter({
    routes: [{
            // 路由地址
            path: '/home',
            // 对应的路由显示的组件
            component: Home
        },
        {
            path: '/sport',
            name: 'sport',
            component: Sport
        }
    ]
})
export default router

上面是没有配置路由懒加载的路由，会有当打包编译的时候所有的相关有路由的页面都会被编译，会造成页面编译和加载特别慢

懒加载就是随用随加载，提高页面的加载性能

let router = new VueRouter({
    linkActiveClass: 'is-active',
    routes: [{
            // 路由地址
            path: '/home',
            // 对应的路由显示的组件
            component: () =>
                import ('@/views/Home')
        },
        {
            path: '/sport',
            name: 'sport',
            component: () =>
                import ('@/views/Sport')
        }
    ]
})
export default router

上面的代码是路由的懒加载，机理就是什么时候用到该组件然后再去加载，这样提高页面的性能优化，尤其是页面的初始化加载会变快