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, 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...