Navigating through the File Tree and Loading Folders from the URL Chapter 5Creating a breadcrumb from the current path
When navigating through folders or a nested structure of any kind, it's always nice to have
a breadcrumb available so the user knows where they are, how far they've gone, and also
so they can get back to a previous folder easily. We are going to make a component for the
breadcrumb as it is going to feature various properties, computed functions, and methods.
The breadcrumb component is going to list each folder depth as a link to a folder icon.
Clicking the link will take the user directly to that folder - even if it is several layers up. To
achieve this, we will need to have a list of links we can loop through, each with two
properties - one being the full path to the folder and the other just being the folder name.
For example, if we had the folder structure of /images/holiday/summer/iphone, we
would want to be able to click on Holiday and for the app to navigate to
/images/holiday.
Create your breadcrumb component — for now, add an empty
property:
Vue.component('breadcrumb', {
template: '<div></div>'
});Add the component to your view. We're going to want the breadcrumb to fade in and out
with the structure list, so we need to tweak the HTML to wrap both the list and
breadcrumb component in a container that has the v-if declaration:
<transition name="fade">
<div v-if="!isLoading">
<breadcrumb></breadcrumb>
<ul>
<template v-for="entry in structure.folders">
<folder :f="entry" @path="updateStructure">
</folder>
</template>
<template v-for="entry in structure.files">
<file :f="entry"></file>
</template>
</ul>
</div>
</transition>