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

默认用法

import { lazyLoadView } from 'ljc-lazy-view';

const routes = [
  {
    name: 'name',
    path: '/',
    component: () => lazyLoadView(import('@/views/Home.vue')),
  }
]
// ....

自定义用法

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之类的组件中，以获取更优的体验。例如：

<div
  v-for="tab in tabs"
  :key="tab.label"
  @click="activeComponent = tab.component"
>
  {{ tab.label }}
</div>
<keep-alive>
  <component :is="activeComponent"></component>
</keep-alive>

import { lazyLoadView } from 'ljc-lazy-view';
export default {
  data() {
    activeComponent: null,
    tabs: [
      { 
        label: 'tabA', 
        component: () => lazyLoadView( import('../xx/xx.vue') )
      },
      // ...
    ],
  }
}

API

myLazyLoadView Options

| key | type | default | description | | :------ | :----: | :-----: | :------------------------------------------------------- | | loading | module | - | 异步加载时候代替显示的组件 | | error | module | - | 加载失败时使用的组件 | | delay | Number | 200 | 延时内异步组件就绪不需要显示，合理的延时可以避免页面闪烁 |

Preview

可以限制网络地浏览我的主页查看效果