Navigating through the File Tree and Loading Folders from the URL Chapter 5Now that we have a variable populated with the current path, we can pass it through to the
breadcrumb component as a prop. Add a new attribute to the breadcrumb with the path
variable as the value:
<breadcrumb :p="path"></breadcrumb>Update the component to accept the prop as a string:
Vue.component('breadcrumb', {
template: '<div></div>',
props: {
p: String
}
});The p attribute now contains the full path of where we are (for example
/images/holiday/summer). We want to break up this string so we can identify the folder
name and build the breadcrumb for the component to render.
Create a computed object on the component and create a new function titled folders().
This is going to create the breadcrumb array for us to loop through in the template:
computed: {
folders() {
}
}We now need to set up some variables for us to use. Create a new, empty array called
output. This is where we are going to build up our breadcrumb. We also need an empty
variable titled slug as a string. The slug variable refers to a part of a URL and its use was
made popular by WordPress. The last variable is the path created as an array. As we know,
each folder is separated by a /, we can use this to explode or split the string into various
parts:
computed: {
folders() {
let output = [],
slug = '',
parts = this.p.split('/');
}
}If we were to look at the parts variable for our Summer folder, it would look like the
following:
['images', 'holiday', 'summer']