vue路由懒加载

一、当打包构建应用时，Javascript包会变得很大，影响页面加载。
二、懒加载就是将不同路由对应的组件分隔成不同的代码块，然后当路由被访问时，才加载对应的组件，这样就更高效了。
三、常用的加载方式有两种：vue异步组件、ES6中的import
1.没有使用懒加载，vue中的路由配置如下

　　　　 import Vue from 'vue'
                import Router from 'vue-router'
                import Hello from './components/Hello'

                Vue.use(Router)；

                export default ({
                  routes: [
                    {
                      path: '/',
                      name: 'Hello',
                      component:Hello
                    }
                  ]
                })

2.vue异步组件的懒加载
component：resolve =>(require([‘要添加的路由地址’])，resolve)

　　　　 import Vue from 'vue'
                import Router from 'vue-router'
             
                Vue.use(Router)

                export default ({
                  routes: [
                    {
                      path: '/',
                      name: 'Hello',
                     component：resolve =>(require(["./components/Hello"]),resolve)
                    }
                  ]
                })

3.ES6中提出的import方法
示例如下: const Hello = ()=>import("./components/Hello")

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

4.父子路由懒加载

import Vue from 'vue'
import Router from 'vue-router'
Vue.use(Router);

const routes=[
	{
            path: '/',
            component: () => import('./views/vpnClient/help'),
            name: '使用帮助',
            hidden: true,
            meta: {ignore: true},
            children: [
                {
                    path: '/help',
                    component: () => import('./views/vpnClient/help1'),
                    hidden: true,
                    name: "使用帮助",
                    meta: {ignore: true}
                },
                {
                    path: '/help2',
                    component: () => import('./views/vpnClient/help2'),
                    hidden: true,
                    name: "使用帮助",
                    meta: {ignore: true}
                },
                {
                    path: '/help3',
                    component: () => import('./views/vpnClient/help3'),
                    hidden: true,
                    name: "使用帮助",
                    meta: {ignore: true}
                },
                {
                    path: '/help4',
                    component: () => import('./views/vpnClient/help4'),
                    hidden: true,
                    name: "使用帮助",
                    meta: {ignore: true}
                }
            ]
        },
]