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' ,

       }

    ]

})

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容