ljc-lazy-view

light-joint-case 轻量的联合的方案，缩写也是俺的名儿，以后会将想要封装的东西放到这个 “ light-joint-case ” 系列里

基于 Vue2 的 functional 组件做的一个路由懒加载函数，非常简单，但是几乎每一个项目都会用到，所以封起来吧

- ljc-lazy-view
- install
- Usage
- 默认用法
- 自定义用法
- 不在路由之内
- API
- myLazyLoadView Options
- Preview

install

npm i ljc-lazy-view

或

yarn add ljc-lazy-view

Usage

默认用法

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

ljc-lazy-view

light-joint-case 轻量的联合的方案，缩写也是俺的名儿，以后会将想要封装的东西放到这个 “ light-joint-case ” 系列里

基于 Vue2 的 functional 组件做的一个路由懒加载函数，非常简单，但是几乎每一个项目都会用到，所以封起来吧

自定义用法

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')),
  },
  ...
]