<template>
  <ol class="breadcrumb">
    <!-- Вычисление последнего элемента -->
    <li v-for="(link, index) in links" :class="{active: (lastLink === link)}">
      <router-link :to="link.href" v-if="routing && !(lastLink === link)">{{link.title}}</router-link>
      <a :href="link.href" data-lol v-else-if="!(lastLink === link)">{{link.title}}</a>
      <span v-else="(lastLink === link)">{{link.title}}</span>
    </li>

    <!-- Последний элемент по свойству current из внешнего объекта -->
      <li v-for="(link, index) in links" :class="{active: link.current}">
      <router-link :to="link.href" v-if="routing && !link.current">{{link.title}}</router-link>
      <a :href="link.href" data-lol v-else-if="!(lastLink === link)">{{link.title}}</a>
      <span v-else="(lastLink === link)">{{link.title}}</span>

    </li>
  </ol>
</template>
<script>
  export default {
    name: 'breadcrumbs',
    data() {
      return {
        lastLink: this.links[this.links.length - 1],
      };
    },
    props: {
      links: Array,
      routing: {
        type: Boolean,
        default: true,
      },
    },
  };
</script>
<style>

</style>