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.