vue+webpack实现异步加载三种用法

1.第一例

const Home = resolve => {

    import("@/components/home/home.vue").then( module => {

            resolve(module)

    }

}

注：（上面import的时候可以不写后缀）

export default [{

    path: '/home',

    name:'home',

    component: Home,

    meta: {

        requireAuth: true,  // 添加该属性可以判断出该页面是否需要登录显示

    },

}]

2.第二例

const router = new Router({

    routes: [

        {

              path: '/home',

              component: (resolve)=> {

                  require(['../components/home/home'], resolve) // 省去了在上面去import引入

              }

          }

    ]

})

3.第三例,这也是推荐的一种

// r就是resolve// 路由也是正常的写法 这种是官方推荐的写的 按模块划分懒加载 

const Home = r => require.ensure([], () => r(require('../components/home/home')), 'home');

const router = new Router({

    routes: [

        {

          path: '/home/home',

          component: Home,

          name: 'home' ,

       }

    ]

})