Like what InstantClick said, before visitors click on a link, they hover over that link. Between these two events, 200 ms to 300 ms usually pass by. InstantClick makes use of that time to preload the page, so that the page is already there when you click.
What the difference between InstantClick and Vue Preload is the latter preloads the data to store in state instead of replacing the HTML.
First install with npm install vue-preload and use the plugin, pretty neat huh?
Or even CDN: https://unpkg.com/vue-preload@latest
import Vue from 'vue'
import VuePreload from 'vue-preload'
Vue.use(VuePreload)
// with options
Vue.use(VuePreload, {
// show the native progress bar
// put <preloading></preloading> in your root component
showProgress: true,
// excutes when click
onStart() {},
// excutes when use .end() and after .setState()
onEnd() {},
// excutes when prefetching the state
onPreLoading() {},
})Protip: You can disable showProgress and define your custom progress bar with onStart() and onEnd()
Then replace your v-on:click="handleClick" with v-preload="handleClick", and make a small change:
...
handleClick(pr) {
fetch.then().then(data => {
// pre-set states
pr.set({title: data.title})
// add the following line to tell it preLoading ends
pr.end()
})
}
...MIT.