VUE路由懶載入的3種方式

// 匯入vue

import vue from 'vue'
// 匯入路由
import router from 'vue-router'
// 匯入登入元件
import login from '@/components/login/login'
// 匯入home元件
import home from '@/components/home/home'
// 安裝路由外掛程式
vue.use(router)
// 建立路由物件，配置路由規則
const router = new router(,
,]})

在大型應用中，我們可能需要將應用分割成小一些的**塊，並且只在需要的時候才從伺服器載入乙個模組。為了簡化，vue 允許你以乙個工廠函式的方式定義你的元件，這個工廠函式會非同步解析你的元件定義。vue 只有在這個元件需要被渲染的時候才會觸發該工廠函式，且會把結果快取起來供未來重渲染

const router = new router(},}

]})

每個 () => import() 都會生成乙個獨立的js檔案

也就是說：只要使用這個語法，就是告訴 webpack 這就是乙個**分割點，這樣生成乙個獨立的js檔案，來實現按需載入的功能

// 無需import匯入元件

const login = () => import(/* webpackchunkname: 'login' */ '@/components/login/login')
const home = () => import(/* webpackchunkname: 'home' */ '@/components/home/home')
// 建立路由物件，配置路由規則
const router = new router(,
,]})

說明：webpackchunkname 相同，那麼，這兩個元件會被打包生產乙個js檔案

const goods = () => import(/* webpackchunkname: 'goods' */'@/components/goods')

const goodsadd = () => import(/* webpackchunkname: 'goods' */'@/components/goods-add')

require.ensure（）的語法：

require.ensure（dependencies：string ，callback：function（require），errorcallback：function（error），chunkname：string）

const router = new router(,

,]})

vue路由懶載入的兩種方式

1 當乙個vue專案很大的時候，對於一些 暫時 用不到的元件，我們可以不進行載入，等到用到次元件時再載入。這樣可以優化spa應用首次載入白屏情況，也給使用者更好的體驗。這樣就是vue路由懶載入。2 常用的懶載入方式有兩種 即使用 es中的import 和 vue非同步元件 2.1 未使用懶載入 im...

vue路由加懶載入的方式

1 當乙個vue專案很大的時候，對於一些 暫時 用不到的元件，我們可以不進行載入，等到用到次元件時再載入。這樣可以優化spa應用首次載入白屏情況，也給使用者更好的體驗。這樣就是vue路由懶載入。2 常用的懶載入方式有兩種 即使用 es中的import 和 vue非同步元件 2.1 未使用懶載入 im...

vue路由懶載入

import vue from vue import vuerouter from vue router vue.use vuerouter var router new vuerouter routes name 登陸 path component resolve require.ensure r...