美文网首页
vue 路由的懒加载

vue 路由的懒加载

作者: 小太阳可可 | 来源:发表于2018-12-21 15:15 被阅读0次
    前言:

    懒加载也叫延迟加载,即在需要的时候进行加载,随用随载;

    为何要用懒加载:

    1、在单页应用中,如果没有应用懒加载,运用webpack打包后的文件将会异常的大;
    2、造成进入首页时,需要加载的内容过多,延时过长,不利于用户体验;
    3、运用懒加载可以将页面进行划分,按需加载页面,可以分担首页所承担的加载压力,减少加载用时。

    非懒加载配置:
    import Vue from 'vue'
    import Router from 'vue-router'
    import index from '@/components/index'
    
    
    Vue.use(Router);
    const routes = [
      {
        path: '/',
        name: 'index',
        component:index
    }
    ];
    const router = new Router({
      routes
    })
    export default router;
    
    懒加载配置:
    import Vue from 'vue'
    import Router from 'vue-router'
    Vue.use(Router);
    const routes = [
      {
        path: '/',
        name: 'index',
        component:resolve => require(['@/components/index'],resolve)
      }
    ];
    const router = new Router({
      routes
    })
    export default router;
    
    

    相关文章

      网友评论

          本文标题:vue 路由的懒加载

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