<template>
  <div class="title-layout">
    <span class="label">{{$route.meta.text}}</span>
    <div class="router">
      <span>系统后台</span>
      <span v-for="route in routes" :key="route">{{route}}</span>
    </div>
  </div>
</template>

<script>
function queryPath (routes, route, path) {
  for (let i = 0; i < routes.length; i++) {
    if (routes[i].name === route.name) {
      path.unshift(routes[i])
      return true
    } else if (routes[i].children && queryPath(routes[i].children, route, path)) {
      path.unshift(routes[i])
      return true
    }
  }
  return false
}

export default {
  computed: {
    routes () {
      let routes = []
      let paths = []
      queryPath(this.$router.options.routes, this.$route, paths)

      if (paths.length > 0) {
        paths.forEach(path => {
          path.meta && path.meta.text && routes.push(path.meta.text)
        })
      } else {
        routes.push(this.$route.meta.text)
      }
      return routes
    }
  }
}
</script>

<style scoped>
.title-layout {
  padding: 0 30px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: #fff;
}

.label {
  font-size: 18px;
  font-weight: normal;
}

.router span {
  color: rgb(153, 153, 153);
  font-size: 14px;
  font-weight: normal;
}

.router span::after {
  content: '>'
}

.router span:last-child:after {
  display: none;
}
</style>
