Vue 路由懶載入與塊載入

這裡我要講下vue裡面的路由配置,我們可以是一次性請求全部的頁面回來,但是首次載入會變得十分緩慢 .

還有一直種是結合 vue 的非同步元件和 webpack 的**分割功能，輕鬆實現路由元件的懶載入。

vue.

use(vuerouter)
import vuerouter from
'vue-router'
// 這種方式,是頁面一開啟全部頁面都載入完成
import index from
"@/components/index"
import login from
"@/components/login"
import register from
"@/components/register"
const routes =[,
]const router =
newvuerouter()
newvue()
.$mount
()

const

login=(
)=>
import
("@/components/login"
)const
register=(
)=>
import
("@/components/register"
)

有時候我們想把某個路由下的所有元件都打包在同個非同步塊 (chunk) 中。只需要使用 命名 chunk，乙個特殊的注釋語法來提供 chunk name (需要 webpack > 2.4)。

當訪問其中乙個頁面的時候,相同的webpackchunkname:相同值,的路由會一同載入

const

login=(
)=>
import
(/* webpackchunkname: "usercenter" */
"@/components/login"
)const
register=(
)=>
import
(/* webpackchunkname: "usercenter" */
"@/components/register"
)

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...

vue路由懶載入

方法一 resolve 這一種方法較常見。它主要是使用了resolve的非同步機制，用require代替了import,實現按需載入，下面是 示例 import vue from vue import router from vue router import helloworld from com...

Vue路由懶載入

常用的懶載入方式有兩種 即使用vue非同步元件和es中的import 未使用懶載入 import vue from vue import router from vue router import helloworld from components helloworld 未用懶載入 vue.use...