https://github.com/paraself/vue-async-comp
A wrapper class to replace vue async component factory. Mainly help to re-try loading when a chunck fails to load.
https://github.com/paraself/vue-async-comp
async-component vue vue-router
Last synced: 7 months ago
JSON representation
A wrapper class to replace vue async component factory. Mainly help to re-try loading when a chunck fails to load.
- Host: GitHub
- URL: https://github.com/paraself/vue-async-comp
- Owner: paraself
- Created: 2020-04-24T09:35:56.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2021-02-27T10:24:40.000Z (almost 5 years ago)
- Last Synced: 2025-03-28T13:21:37.260Z (11 months ago)
- Topics: async-component, vue, vue-router
- Language: TypeScript
- Size: 12.7 KB
- Stars: 4
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# vue-async-comp
A wrapper class to replace vue async component factory. Mainly help to re-try loading when a chunck fails to load.
The original vue [async component factory](https://vuejs.org/v2/guide/components-dynamic-async.html#Handling-Loading-State) does not offer a way to reload when chunck fail to load. The wrapper class can help reloading chunks.
Vue 异步组件加载器，主要用于当异步组件懒加载失败的时候，能够重新加载该chunk。Vue[默认的异步组件工厂函数](https://vuejs.org/v2/guide/components-dynamic-async.html#Handling-Loading-State)没有提供重试的方法，通过该插件可以方便的在chunk加载失败的时候，重新加载对应的chunk。
## Install
```
npm i -S vue-async-comp
```
## Usage
Routing
``` ts
import RouteLoading from './RouteLoading.vue'
import RouteError from './RouteError.vue'
import { AsyncComp } from 'vue-async-comp'
const asyncComp = new AsyncComp({
error: CompError,
loading: CompLoading
})
const routes: RouteConfig[] = [
{
path: '/',
component: asyncComp.load(import('../MyHome.vue'))
}
]
const router = new VueRouter({
routes,
mode: 'history'
})
```
or along with `vue-class-component`
``` ts
@Component({
components: {
MyComp: asyncComp.load(import('../MyComp.vue'))
}
})
export default class Test extends Vue {
}
```
## Chunk reloading
In `Error.vue`, emit `reload` event.
``` vue
click to reload
```