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

Navigating through the File Tree and Loading Folders from the URL Chapter 5

The Vue instance now looks like this:

const app = new Vue({

el: '#app',

data: {

path: ''

},

methods: {

updateHash() {

let hash = window.location.hash.substring(1);

this.path = (hash || '');

}

},

created() {

this.updateHash()

}

});

Lastly, to remove repetition, we can fire the updateHash method when the hash changes in

the address bar:

window.onhashchange = () => {

app.updateHash();

}

Final Code

With our code now complete your view and JavaScript file should look like the following.

Firstly, the view should look like this:

<div id="app">

<dropbox-viewer :path="path"></dropbox-viewer>

</div>

<script type="text/x-template" id="dropbox-viewer-

template">

<div>

<h1>Dropbox</h1>

<transition name="fade">

<div v-if="isLoading">

<div v-if="isLoading == 'error'">

<p>There seems to be an issue with the URL

entered.</p>

<p><a href="">Go home</a></p>

</div>

<div v-else>