zoukankan      html  css  js  c++  java
  • vue路由懒加载resolve方式与import方式

    路由懒加载

    使用路由懒加载是为了 更好的用户体验,首屏组件加载的速度快一点,解决了白屏的问题
    懒加载就是延迟加载或者屎按需加载,在需要的时候进行加载
    常用的懒加载有两种,vue异步组件和es的import

    1. 未使用懒加载的时候vue中的路由代码:
    //每一个组件都会被加载进来 ,打开首页的时候全部都会加载
    import Vue from "vue"
    import Router from "vue-router"
    import HelloWorld from "@/components/HelloWorld.vue"
    Vue.use(Router)
    
    export default new Router({
      routes:[
        {
          path:"/",
          name:"HelloWorld",
          component:HelloWorld
        }
      ]
    })
    
    1. vue异步组件方式实现懒加载
    import Vue from "vue"
    import Router from "vue-router"
    Vue.use(Router)
    
    export default new Router({
      routes:[
        {
          path:"/",
          name:"HelloWorld",
          component:resolve=>(require(["@/components/HelloWorld.vue"],resolve))
        }
      ]
    })
    
    1. es的import
    import Vue from "vue"
    import Router from "vue-router"
    Vue.use(Router)
    
    const HelloWorld = ()=>import("@/components/HelloWorld.vue")
    export default new Router({
      path:"/",
      name:"HelloWorld",
      component:HelloWorld
    })
    
    //或
    export default new Router({
      path:"/",
      name:"HelloWorld",
      component:()=>import("../views/HelloWorld/index.vue")
    })
    
  • 相关阅读:
    桶排序
    基数排序
    计数排序
    归并排序
    快速排序
    优先级队列-堆实现
    堆排序
    红黑树
    【转】二叉树
    ubuntu 16.04 mysql 相关
  • 原文地址:https://www.cnblogs.com/my466879168/p/12767605.html
Copyright © 2011-2022 走看看