Prefetch the route components of router-link in viewport.
npm install vue-router-prefetch  
Please consider donating to this project's author, EGOIST, to show your ❤️ and support.
- Prefetch links when they are visible in viewport.
- You don't need to change your code base to make it work.
- Tiny-size.
``bash`
yarn add vue-router-prefetch
You need to use this plugin after vue-router:
`js
import Vue from 'vue'
import Router from 'vue-router'
import RouterPrefetch from 'vue-router-prefetch'
Vue.use(Router)
Vue.use(RouterPrefetch)
`
Then you can use without any changes, when this component is visible in viewport, it will automatically prefetch the (async) route component.
Check out the live demo.
You can also register it as a new component instead of overriding :
`js`
Vue.use(RouterPrefetch, {
componentName: 'QuickLink'
})
Now you can use it as in your app.
- Without polyfills: Chrome, Firefox, Edge, Opera, Android Browser, Samsung Internet.
- With Intersection Observer polyfill ~6KB gzipped/minified: Safari, IE11
All props of are still available, additional props are listed below.
- Type: booleantrue
- Default:
Whether to prefetch the matched route component.
You can also set meta.prefetch on vue-router's route object to disable prefetching this route for all s:
`js`
new VueRouter({
routes: [
{
path: '/some-async-page',
meta: { prefetch: false },
component: () => import('./async-page.vue')
}
]
})
It's also possible to turn of prefetching globally:
`js`
Vue.use(RouterPrefetch, {
prefetch: false
})
- Type: string[]['/foo.css']
- Examples:
A list of additional files to prefetch. By default we only prefetch the route component.
You can also set meta.prefetchFiles on vue-router's route object, it will be merged with the prop value:
`js`
new VueRouter({
routes: [
{
path: '/some-async-page',
meta: { prefetchFiles: ['/foo.css'] },
component: () => import('./async-page.vue')
}
]
})
- Type: number2000
- Default: (ms)
Timeout after which prefetching will occur.
Inspired by quicklink and nuxt-link.
1. Fork it!
2. Create your feature branch: git checkout -b my-new-featuregit commit -am 'Add some feature'
3. Commit your changes: git push origin my-new-feature`
4. Push to the branch:
5. Submit a pull request :D
vue-router-prefetch © EGOIST, Released under the MIT License.
Authored and maintained by EGOIST with help from contributors (list).
> Website · GitHub @EGOIST · Twitter @\_egoistlily