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

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

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