美文网首页
Vue项目中路由和组件懒加载

Vue项目中路由和组件懒加载

作者: 潇湘轮回 | 来源:发表于2020-05-19 14:08 被阅读0次

    为什么要使用懒加载?

    懒加载简单来说就是延迟加载或按需加载,即在需要的时候进行加载。使用懒加载可以带来更好的用户体验,提升首页的加载速度特别是大型单页面应用(SPA),解决白屏问题。

    Vue中实现懒加载常见的两种方式

    • Vue异步组件
    • ES中的import

    Vue中路由懒加载

    未使用路由懒加载代码:

    import Vue from 'vue'
    import Router from 'vue-router'
    import HelloWorld from '@/components/HelloWorld'
    
     Vue.use(Router)
    
    export default new Router({
    routes: [
    {
        path: '/',
        name: 'HelloWorld',
        component:HelloWorld
    }
                 ]
    })
    

    Vue异步组件实现懒加载。方法如下:component:resolve=>(require(['需要加载的路由的地址']),resolve)

    import Vue from 'vue'
    import Router from 'vue-router'
    /* 此处省去之前导入的HelloWorld模块 */
    Vue.use(Router)
    
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component: resolve=>(require(["@/components/HelloWorld"],resolve))
        }
      ]
    })
    

    ES 中的import方法(------最常用------)。方法如下:const HelloWorld = ()=>import('需要加载的模块地址')

    import Vue from 'vue'
    import Router from 'vue-router'
    
    Vue.use(Router)
    
    const HelloWorld = ()=>import("@/components/HelloWorld")
    export default new Router({
      routes: [
        {
          path: '/',
          name: 'HelloWorld',
          component:HelloWorld
        }
      ]
    })
    

    Vue中组件懒加载

    未使用组件懒加载代码:

    <template>
      <div class="hello">
      <One-com></One-com>
      1111
      </div>
    </template>
    
    <script>
    import One from './one'
    export default {
      components:{
        "One-com":One
      },
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
    </script>
    

    Vue异步组件实现懒加载。

    <template>
      <div class="hello">
      <One-com></One-com>
      1111
      </div>
    </template>
    
    <script>
    export default {
      components:{
        "One-com":resolve=>(['./one'],resolve)
      },
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
    </script>
    

    ES 中的import方法(------最常用------)。

    <template>
      <div class="hello">
      <One-com></One-com>
      1111
      </div>
    </template>
    
    <script>
    const One = ()=>import("./one");
    export default {
      components:{
        "One-com":One
      },
      data () {
        return {
          msg: 'Welcome to Your Vue.js App'
        }
      }
    }
    </script>
    

    如果觉得本文对您有帮助的小伙伴可以积极留言或者点赞!🍉🍉🍉

    相关文章

      网友评论

          本文标题:Vue项目中路由和组件懒加载

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