vue 路由 實現按需載入的3種方式

2021-10-17 04:05:59 字數 1234 閱讀 8231

vue官方文件:路由懶載入(使用import())

vue-router配置路由,**如下:

// 下面2行**,沒有指定webpackchunkname,每個元件打包成乙個js檔案。

const importfuncdemo1 = () => import('../components/importfuncdemo1')

const importfuncdemo2 = () => import('../components/importfuncdemo2')

// 下面2行**,指定了相同的webpackchunkname,會合併打包成乙個js檔案。

// const importfuncdemo = () => import(/* webpackchunkname: 'importfuncdemo' */ '../components/importfuncdemo')

// const importfuncdemo2 = () => import(/* webpackchunkname: 'importfuncdemo' */ '../components/importfuncdemo2')

export default new router(,

]})

舉例如下:

// 下面2行**,沒有指定webpackchunkname,每個元件打包成乙個js檔案。

const importfuncdemo1 = () => import('../components/importfuncdemo1')

const importfuncdemo2 = () => import('../components/importfuncdemo2')

// 下面2行**,指定了相同的webpackchunkname,會合併打包成乙個js檔案。

// const importfuncdemo = () => import(/* webpackchunkname: 'importfuncdemo' */ '../components/importfuncdemo')

// const importfuncdemo2 = () => import(/* webpackchunkname: 'importfuncdemo' */ '../components/importfuncdemo2')

export default new router(,

]})

**:

vue專案實現路由按需載入 懶載入 的3種方式

vue非同步元件技術 非同步載入 vue router配置路由 使用vue的非同步元件技術 可以實現按需載入 但是,這種情況下乙個元件生成乙個js檔案 vue非同步元件技術 元件懶載入方案二 路由懶載入 使用import 下面2行 沒有指定webpackchunkname,每個元件打包成乙個js檔案...

vue專案實現路由按需載入的3種方式

vue非同步元件技術 非同步載入 vue router配置路由 使用vue的非同步元件技術 可以實現按需載入 但是,這種情況下乙個元件生成乙個js檔案 vue非同步元件技術 元件懶載入方案二 路由懶載入 使用import 下面2行 沒有指定webpackchunkname,每個元件打包成乙個js檔案...

vue 路由的按需載入

之前有提到過當建立乙個vue結尾的檔案的時候,則需要在router資料夾下的index頁面進行新增對應的路徑,這個是沒有錯的,但是當你進行按需載入的時候,就不在需要使用import來新增對應的路徑了 此處的路徑可以省略 放入頁面中的 const router new vuerouter中寫入,寫入的...