Navigating through the File Tree and Loading Folders from the URL Chapter 5}
},
created() {
this.d.filesGetTemporaryLink({path:
this.f.path_lower}).then(data => {
this.link = data.link;
});
},
});Updating the URL hash and using it to navigate through the folders
With our Dropbox web app now fully navigable via both the structure list and breadcrumb,
we can now add and update the browser URL for quick folder access and sharing. We can
do this in two ways: we can either update the hash, for example,
http://www.domain.com/#/images/holiday/summer, or we can redirect all the paths to the
single page and handle the routing without the hash in the URL.
For this app, we will use the # method in the URL. We'll cover the URL routing technique
in the third section of the book when we introduce vue-router.
Before we get the app to show the corresponding folder of the URL, we first need to get the
URL to update when navigating to a new folder. We can do this using the native
window.location.hash JavaScript object. We want to update the URL as soon as the user
clicks a link, rather than waiting for the data to load to update.
As the getFolderStructure method gets fired whenever we update the structure, add
the code to the top of this function. This would mean the URL gets updated and then the
Dropbox API is called to update the structure:
getFolderStructure(path) {
window.location.hash = path;this.dropbox().filesListFolder({
path: path,
include_media_info: true
})
.then(response => {
const structure = {
folders: [],
files: []
}