基于 vue functional 的lazy-view
npm install ljc-lazy-view基于 Vue2 的 functional 组件做的一个路由懒加载函数,非常简单,但是几乎每一个项目都会用到,所以封起来吧
- ljc-lazy-view
- install
- Usage
- 默认用法
- 自定义用法
- 不在路由之内
- API
- myLazyLoadView Options
- Preview
npm i ljc-lazy-view或
yarn add ljc-lazy-view
JS
import { lazyLoadView } from 'ljc-lazy-view';const routes = [
{
name: 'name',
path: '/',
component: () => lazyLoadView(import('@/views/Home.vue')),
}
]
// ....
`
自定义用法
`JS
import { myLazyLoadView } from 'ljc-lazy-view';
import Loading from './xxx/Loading';
import errorLoading from './xxx/404';// 这种实现方式你甚至可以为不同的路由添加不一样的loading组件
const lazyView = myLazyLoadView({
delay: 1000, // 默认为 200ms
loading: Loading,
error: errorLoading,
// ...
});
const routes = [
{
name: 'name',
path: '/1',
component: () => lazyView(import('@/views/Home.vue')),
},
...
]
`不在路由之内
此组件也能用在如tabs之类的组件中,以获取更优的体验。例如:
`html
v-for="tab in tabs"
:key="tab.label"
@click="activeComponent = tab.component"
>
{{ tab.label }}
`JS
import { lazyLoadView } from 'ljc-lazy-view';
export default {
data() {
activeComponent: null,
tabs: [
{
label: 'tabA',
component: () => lazyLoadView( import('../xx/xx.vue') )
},
// ...
],
}
}
``