Navigating through the File Tree and Loading Folders from the URL Chapter 5'</div>',Next, create the navigate method on your breadcrumb component, making sure you
accept the folder parameter and emit the path:
methods: {
navigate(folder) {
this.$emit('path', folder.path);
}
}The last step is to trigger the parent method when the path gets emitted. For this, we can
utilize the same updateStructure method on the dropbox-viewer component:
<breadcrumb :p="path" @path="updateStructure">
</breadcrumb>We now have a fully operational breadcrumb that allows the user to navigate down the
folder structure using the folder links and back up via breadcrumb links.
Our full breadcrumb component looks like is:
Vue.component('breadcrumb', {
template: '<div>' +
'<span v-for="(f, i) in folders">' +
'<a @click.prevent="navigate(f)"
: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('/');
console.log(parts);
for (let item of parts) {
slug += item;
output.push({'name': item || 'home', 'path':
slug});
slug += '/';
}