vue 路由懒加载

vue路由懒加载resolve方式与import方式

路由懒加载

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

未使用懒加载的时候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
    }
  ]
})

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))
    }
  ]
})

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")
})

https://www.cnblogs.com/my466879168/p/12767605.html