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

(singke) #1
Navigating through the File Tree and Loading Folders from the URL Chapter 5

this.getFolderStructure(this.path);
},
watch: {
path() {
this.updateStructure(this.path);
}
},
});
const app = new Vue({
el: '#app',

data: {
path: ''
},
methods: {
updateHash() {
let hash = window.location.hash.substring(1);
this.path = (hash || '');
}
},
created() {
this.updateHash()
}
});
window.onhashchange = () => {
app.updateHash();
}

Summary


We now have a fully functioning Dropbox viewer app featuring navigation for folders and
download links for files. We can use either the folder links or breadcrumb for navigation


and use the back and/or forward buttons. We can also share or bookmark a link and load
the contents of that folder.


In Chapter 6, Caching the Current Folder Structure Using Vuex, we are going to speed up the


navigation process by caching the current folder contents using Vuex.

Free download pdf