一洋丐、為什么要使用路由懶加載
為給客戶更好的體驗，首頁組件加載速度更快一些挥等，同時可以解決白屏問題友绝。
二、定義
懶加載簡單的說就是延遲加載或按需加載肝劲，即在需要的時候進(jìn)行加載迁客。
三、使用
常用的懶加載方式有兩種：即使用vue異步組件 和 ES6中import
1辞槐、未用懶加載掷漱，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
}
]
})
2、vue異步組件實現(xiàn)懶加載
方法如下：component：resolve=>(require(['需要加載的路由的地址'])催蝗，resolve)
import Vue from 'vue'
import Router from 'vue-router'
/* 此處省去之前導(dǎo)入的HelloWorld模塊 */
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'HelloWorld',
component: resolve=>(require(["@/components/HelloWorld"],resolve))
}
]
})
3切威、ES6 提出的import方法，（------最常用------）
方法如下：const HelloWorld = （）=>import('需要加載的模塊地址')
不加 { } 丙号，表示直接return）
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
}
]
})
組件懶加載
與路由懶加載相同
1先朦、原來組件中寫法
<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>
2、const方法
<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>
3犬缨、異步方法
<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>
五喳魏、總結(jié)：
路由和組件的常用兩種懶加載方式：
1、vue異步組件實現(xiàn)路由懶加載
component：resolve=>(['需要加載的路由的地址'怀薛，resolve])
2刺彩、es提出的import(推薦使用這種方式)
const HelloWorld = （）=>import('需要加載的模塊地址')
文章來源于https://www.cnblogs.com/xiaoxiaoxun/p/11001884.html
