Package Exports

ljc-lazy-view
ljc-lazy-view/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (ljc-lazy-view) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

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

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