美文网首页
vue+webpack实现异步加载三种用法

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

作者: 剁椒先生 | 来源:发表于2018-04-24 11:15 被阅读0次

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

       }

    ]

})

相关文章

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

    1.第一例 const Home = resolve => { import("@/components/ho...

  • vue-01

    vue+webpack 优化 一.异步加载 1.异步加载组件,其实就是组件懒加载。可以理解为:当我需要使用组件的时...

  • vue+webpack实现异步组件加载

    HTML JS 注意:加载异步组件的时候,组件名后边的.vue不要忽略。这个例子应该比较直观了。点击按钮之后改变了...

  • Picasso的使用

    Picasso的基本使用 picasso仅需一行代码就能实现图片的异步加载 Picasso不仅实现了图片异步加载的...

  • js补充30-异步加载js

    javascript异步加载的三种方案 1.deder异步加载,但要等到dom文档全部解析完才会被执行。只有IE能...

  • 性能优化之Vue组件懒加载(二)

    上一次我们实现了模块的渲染和模块内的资源的加载,但是我们并没有真正实现组件的异步加载。 1.什么是异步组件? 异步...

  • Vue异步加载组件

    1.异步加载组件就是在定义组件的时候什么都不做,只有当组件第一次使用的时候才进行加载和渲染。 2.实现的三种方式:...

  • 抓取网页异步加载数据

    这里,我用python抓取了knowone发现页面的数据。 异步加载: 异步加载可以实现网页的瀑布流形式向网站进行...

  • vue中的懒加载和按需加载

    懒加载 (1)定义:懒加载也叫延迟加载,即在需要的时候进行加载,随用随载。 (2)异步加载的三种表示方法: 1.r...

  • AJAX

    同步和异步 异步的javascript和xml就是AJAX,不用全部重新加载,可以实现异步请求,局部刷新的功能。 ...

网友评论

      本文标题:vue+webpack实现异步加载三种用法

      本文链接:https://www.haomeiwen.com/subject/fwidlftx.html