Complete Vue.js 2 Web Development_ Practical guide to building end-to-end web development solutions with Vue.js 2

Pre-Caching Other Folders and Files for Faster Navigation Chapter 7

And in the end, we go through the window.onhashchange function:

/**

* Update the path & store when the URL hash changes

*/

window.onhashchange = () => {

app.$store.commit('updateHash');

}

Finally, the HTML from the view looks like this:

<div id="app">

<dropbox-viewer></dropbox-viewer>

</div>

And the template for the Dropbox viewer looks like this:

<script type="text/x-template" id="dropbox-viewer-template">

<div>

<h1>Dropbox</h1>

<transition name="fade">

<div v-if="isLoading">

<div v-if="isLoading == 'error'">

<p>There seems to be an issue with the URL entered.</p>

<p><a href="">Go home</a></p>

</div>

<div v-else>

Loading...

</div>

</div>

</transition>

<transition name="fade">

<div v-if="!isLoading">

<breadcrumb></breadcrumb>

<ul>

<template v-for="entry in structure.folders">

<folder :f="entry" :cache="getFolderStructure"></folder>

</template>

<template v-for="entry in structure.files">

<file :d="dropbox()" :f="entry"></file>

</template>

</ul>

</div>

</transition>

</div>

</script>