Navigating through the File Tree and Loading Folders from the URL Chapter 5The next step is to update this data property every time the URL gets updated. This is done
using window.onhashchange, which is a native JavaScript function that fires every time
the hash changes in the URL.
Copy and paste the hash modifier from the created function on the Dropbox component,
and use that to modify the hash and store the value on the Vue instance. If the hash doesn't
exist, we will pass an empty string to the path variable:
window.onhashchange = () => {
let hash = window.location.hash.substring(1);
app.path = (hash || '');
}We now need to pass this path variable through to the Dropbox component. Add a prop of
p with the path variable as the value in your view:
<div id="app">
<dropbox-viewer :p="path"></dropbox-viewer>
</div>Add the props object to the Dropbox component to accept a string:
props: {
p: String
},We are now going to add a watch function to the dropbox-viewer component. This
function will watch the p prop and, when updated, call the updateStructure() method
with the modified path:
watch: {
p() {
this.updateStructure(this.p);
}
}Heading back to the browser we should now be able to navigate through our Dropbox
structure, as before, using both the folder links and breadcrumb as navigation. We should
now be able to use the back and forward browser buttons, plus any keyboard shortcuts, to
also navigate back through the folders.
Before we head to Chapter 6, Caching the Current Folder Structure Using Vuex, and introduce
folder caching to our app using vuex, there are a few optimizations we can make to our
Dropbox component.