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")
})
原文地址:https://www.cnblogs.com/my466879168/p/12767605.html