vue路由懒加载

vue路由懒加载

    一 、为什么要使用懒加载
        可以加载页面更快，给客户更好的体验。

    二、使用懒加载 
        常用的懒加载有两种方法：vue异步组件和ES中的import。

1.不使用懒加载

			import Vue from 'vue'
            import Router from 'vue-router'
            import Login from './../pages/Login/Login'             
            Vue.use(Router)
            export default new Router({      
                routes: [
                    {
                        path: "/Login",
                        name: "Login",
                        component:Login,
                    }
                ]
            })

2.vue异步组件实现懒加载

 			import Vue from 'vue'
            import Router from 'vue-router'          
            Vue.use(Router)
            export default new Router({      
                routes: [
                    {
                        path: "/Login",
                        name: "Login",
                        component: resolve => (require(['./../pages/Login/Login'], resolve)),
                    }
                ]
            })

3.ES提出的import方法

 			import Vue from 'vue'
            import Router from 'vue-router'
            const Login= () => import ('./../pages/Login/Login')
            Vue.use(Router)
            export default new Router({      
                routes: [
                    {
                        path: "/Login",
                        name: "Login",
                        component: Login,
                    }
                ]
            })