Breadcrumb.vue 1.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657
  1. <template>
  2. <div class="breadcrumb">
  3. <span>当前位置:</span>
  4. <a-breadcrumb>
  5. <a-breadcrumb-item v-for="(item, index) in breadList" :key="item.name">
  6. <router-link
  7. v-if="item.name != name && index != 0"
  8. :to="{ path: item.path === '' ? '/' : item.path }"
  9. >{{ item.meta.title }}</router-link>
  10. <span v-else>{{ item.meta.title }}</span>
  11. </a-breadcrumb-item>
  12. </a-breadcrumb>
  13. </div>
  14. </template>
  15. <script>
  16. export default {
  17. data () {
  18. return {
  19. name: '',
  20. breadList: []
  21. }
  22. },
  23. created () {
  24. this.getBreadcrumb()
  25. },
  26. methods: {
  27. getBreadcrumb () {
  28. this.breadList = []
  29. // this.breadList.push({name: 'index', path: '/dashboard/', meta: {title: '首页'}})
  30. this.name = this.$route.name
  31. this.$route.matched.forEach((item, index) => {
  32. // item.name !== 'index' && this.breadList.push(item)
  33. if (!item.meta.hide && index > 0) {
  34. this.breadList.push(item)
  35. }
  36. })
  37. }
  38. },
  39. watch: {
  40. $route () {
  41. this.getBreadcrumb()
  42. }
  43. }
  44. }
  45. </script>
  46. <style scoped>
  47. .breadcrumb{
  48. display: flex;
  49. align-items: center;
  50. }
  51. .breadcrumb > span{
  52. color: rgba(0, 0, 0, 0.45);
  53. }
  54. </style>