vue-router-prefetch
v1.6.3
Published
Prefetch the route components of router-link in viewport.
Downloads
4,460
Readme
vue-router-prefetch
Please consider donating to this project's author, EGOIST, to show your ❤️ and support.
Features
- Prefetch links when they are visible in viewport.
- You don't need to change your code base to make it work.
- Tiny-size.
Install
yarn add vue-router-prefetch
Usage
You need to use this plugin after vue-router
:
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 <router-link>
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 <router-link>
:
Vue.use(RouterPrefetch, {
componentName: 'QuickLink'
})
Now you can use it as <quick-link>
in your app.
Browser Support
- Without polyfills: Chrome, Firefox, Edge, Opera, Android Browser, Samsung Internet.
- With Intersection Observer polyfill ~6KB gzipped/minified: Safari, IE11
Props
All props of <router-link>
are still available, additional props are listed below.
prefetch
- Type:
boolean
- Default:
true
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 <router-link>
s:
new VueRouter({
routes: [
{
path: '/some-async-page',
meta: { prefetch: false },
component: () => import('./async-page.vue')
}
]
})
It's also possible to turn of prefetching globally:
Vue.use(RouterPrefetch, {
prefetch: false
})
prefetchFiles
- Type:
string[]
- Examples:
['/foo.css']
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:
new VueRouter({
routes: [
{
path: '/some-async-page',
meta: { prefetchFiles: ['/foo.css'] },
component: () => import('./async-page.vue')
}
]
})
timeout
- Type:
number
- Default:
2000
(ms)
Timeout after which prefetching will occur.
Credits
Inspired by quicklink and nuxt-link
.
Contributing
- Fork it!
- Create your feature branch:
git checkout -b my-new-feature
- Commit your changes:
git commit -am 'Add some feature'
- Push to the branch:
git push origin my-new-feature
- Submit a pull request :D
Author
vue-router-prefetch © EGOIST, Released under the MIT License. Authored and maintained by EGOIST with help from contributors (list).
Website · GitHub @EGOIST · Twitter @_egoistlily