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

We can now loop through the array to create the breadcrumb. Each breadcrumb item is

going to be an object with the name of the individual folder, for example, holiday or

summer, and the slug, which would be /images/holiday for the former and

/images/holiday/summer for the latter.

Each object will be constructed and then added to the output array. We can then return the

output for our template to use:

folders() {

let output = [],

slug = '',

parts = this.p.split('/');

for (let item of parts) {

slug += item;

output.push({'name': item, 'path': slug});

slug += '/';

}

return output;

}

This loop creates our breadcrumb by taking the following steps. For this example, we'll

assume we are in the /images/holiday folder:

1. parts will now be an array containing three items, ['', 'images',
   holiday']. If the string you split on begins with the item you're splitting, an
   empty item will be made as the first item.


2. At the beginning of the loop, the first slug variable will be equal to '', as it is the
   first item.


3. The output array will have a new item appended to it with the object of
   {'name': '', 'path': ''}.


4. The slug variable then has a / added to the end.


5. Looping through the next item, the slug variable gets the name of the item
   (images) added to it.


6. output now has a new object added, with the value of {'name': 'images',
   'path': '/images'}.


7. For the last item, another / is added along with the next name, holiday.


8. output gets the last object added, the value being {'name': 'holiday',
   'path': '/images/holiday'} - note the path is building up whereas the
   name remains the singular folder name.