vue路由懒加载和组件懒加载

死亡的挽歌

于 2019-03-20 15:20:11 发布

阅读量616

点赞数

分类专栏： vue 文章标签： vue vue懒加载

本文链接：https://blog.youkuaiyun.com/dqm159159/article/details/88689569

版权

vue 专栏收录该内容

11 篇文章

订阅专栏

懒加载：又叫延迟加载，首页优化需要用到

路由懒加载的2种方式

第一种：

前面不需要import这个组件
const router=new Router({
    routes:[
        {
            path:'',
            name:'lazy',
            component:resolve=>(require(["@/components/HelloWorld"],resolve))
        }
    ]
})

第二种：（个人觉得这种方式比较好）

const HelloWorld = ()=>import("@/components/HelloWorld")；
const router=new Router({
    routes:[
        {
            path:'',
            name:'lazy',
            component:HelloWorld
        }
    ]    
})

组件懒加载的2种方式：

第一种：（个人觉得这种方式比较好）

const HelloWorld = ()=>import("./HelloWorld");
export default {
  components:{
    HelloWorld
  },
  data () {
    return {
      
    }
  }
}
</script>

第二种：

<script>
export default {
  components:{
    HelloWorld: function(resolve) {
        require(["./HelloWorld.vue"], resolve);
    }
  },
  data () {
    return {

    }
  }
}
</script>