Navigating through the File Tree and Loading Folders from the URL Chapter 5We also need to update the slug of each of the items to prepend a # - this ensures the app
doesn't try and navigate to a brand new page when clicked. As we are looping through our
breadcrumb items in the folders computed function, add a hash to each slug when
pushing the object to the output array:
Vue.component('breadcrumb', {
template: '<div>' +
'<span v-for="(f, i) in folders">' +
'<a :href="f.path">{{ f.name || 'Home' }}</a>' +
'<i v-if="i !== (folders.length - 1)"> »
</i>' + '</span>' +
'</div>',
props: {
p: String
},
computed: {
folders() {
let output = [],
slug = '',
parts = this.p.split('/');
for (let item of parts) {
slug += item;
output.push({'name': item || 'home', 'path':
'#' + slug});
slug += '/';
}
return output;
}
}
});We can also remove the v-on declaration on the breadcrumb component in the dropbox-
viewer-template. It should only have the path being passed in as a prop:
<breadcrumb :p="path"></breadcrumb>We can now repeat the same pattern for the folder component. Remove the
@click.prevent declaration from the link and delete the navigate method.
As we are not looping through or editing the folder object before displaying it, we can
prepend the # in the template. As we are telling Vue the href is bound to a JavaScript
object (with the colon), we need to encapsulate the hash in quotes and concatenate it with
the folder path using the JavaScript + notation.