Pre-Caching Other Folders and Files for Faster Navigation Chapter 7});
Lastly, we can call our new cache() method in the created function:
Vue.component('folder', {
template: '<li><strong><a :href="\'#\' + f.path_lower">{{ f.name
}}</a></strong></li>',
props: {
f: Object,
cache: Function
},
created() {
this.cache(this.f.path_lower);
}
});The caching can be verified, once again, by using the console logs as before. This creates
cleaner code that is easier for yourself, and any other developers, to read.
With our Dropbox app now progressing, we can move on to caching parent folders, should
you enter a subfolder using a hash in the URL.
Caching parent folders
Caching the parent structure is the next preemptive thing we can do to help speed up our
app. Say we had navigated to our images directory, /images/holiday/summer, and
wished to share this with a friend or colleague. We would send them the URL with this in
the URL hash and, on page load, they would see the contents. If they then navigated up the
tree using the breadcrumb to /images/holiday, for example, they would need to wait for
the app to retrieve the contents.
Using the breadcrumb component, we can cache the parent directories and so, on
navigating to the holiday folder, the user would be presented instantly with its contents.
While the user is then browsing this folder, all of its subfolders are being cached with the
previous methods.
To cache the parent folders, we already have a component displaying the path with access
to the slugs of all the parent folders we can loop through—the breadcrumb.