知食记
搜索文档…
路由懒加载
Vue 项目中实现路由按需加载(路由懒加载)有 3 种方式:
1
// 1、Vue异步组件技术:
2
{
3
path: '/home',
4
name: 'Home',
5
component: resolve => reqire(['path路径'], resolve)
6
}
7
8
// 2、es6提案的import()
9
const Home = () => import('path路径')
10
11
// 3、webpack提供的require.ensure()
12
{
13
path: '/home',
14
name: 'Home',
15
component: r => require.ensure([],() => r(require('path路径')), 'demo')
16
}
Copied!

require.context()

require.context(directory,useSubdirectories,regExp)
    directory:说明需要检索的目录
    useSubdirectories:是否检索子目录
    regExp: 匹配文件的正则表达式,一般是文件名
1
import titleCom from '@/components/home/titleCom'
2
import bannerCom from '@/components/home/bannerCom'
3
import cellCom from '@/components/home/cellCom'
4
components: {
5
titleCom, bannerCom, cellCom
6
}
Copied!
这样就写了大量重复的代码,利用 require.context 可以写成
1
const path = require('path')
2
const files = require.context('@/components/home', false, /\.vue$/)
3
const modules = {}
4
files.keys().forEach(key => {
5
const name = path.basename(key, '.vue')
6
modules[name] = files(key).default || files(key)
7
})
8
components: modules
Copied!
最近更新 1yr ago
复制链接