Breadcrumbs.vue 2.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990
  1. <template>
  2. <ol>
  3. <li>
  4. <a class="no-decoration" :href="homeUrl + '/'">
  5. <span class="ot_green--text">{{$t('welcome')}}</span>
  6. </a>
  7. </li>
  8. <li
  9. v-for="(crumb, index) in crumbs"
  10. :key="index"
  11. >
  12. <NuxtLink class="no-decoration" :to="crumb.path">
  13. <span class="ot_green--text">{{
  14. crumb.title
  15. }}</span>
  16. </NuxtLink>
  17. </li>
  18. </ol>
  19. </template>
  20. <script lang="ts">
  21. import {defineComponent, computed, useContext, useRouter} from '@nuxtjs/composition-api'
  22. import {AnyJson} from "~/types/interfaces";
  23. import * as _ from "lodash";
  24. export default defineComponent({
  25. setup() {
  26. const {route, $config, app: {i18n}} = useContext()
  27. const $router = useRouter()
  28. const homeUrl = $config.baseURL_adminLegacy
  29. const crumbs = computed(()=>{
  30. const fullPath = route.value.path
  31. const params = fullPath.startsWith('/')
  32. ? fullPath.substring(1).split('/')
  33. : fullPath.split('/')
  34. const crumbs:Array<AnyJson> = []
  35. let path = ''
  36. params.forEach((param, index) => {
  37. path = `${path}/${param}`
  38. const match = $router.match(path)
  39. if (match.name !== null) {
  40. const title = !parseInt(param, 10) ? i18n.t(param.replace(/-/g, ' ') + '_breadcrumbs') : i18n.t('item')
  41. crumbs.push({
  42. title: title,
  43. ...match,
  44. })
  45. }
  46. })
  47. return crumbs
  48. })
  49. return {
  50. crumbs,
  51. homeUrl
  52. }
  53. }
  54. })
  55. </script>
  56. <style scoped>
  57. ol {
  58. list-style: none;
  59. padding-left: 12px;
  60. padding-top: 10px;
  61. }
  62. li {
  63. display: inline;
  64. }
  65. li:after {
  66. content: ' / ';
  67. display: inline;
  68. font-size: 12px;
  69. color: grey ;
  70. padding: 0 0.0725em 0 0.15em;
  71. }
  72. li:last-child:after {
  73. content: '';
  74. }
  75. li a.nuxt-link-exact-active.nuxt-link-active > span {
  76. color: grey !important;
  77. }
  78. li a > span{
  79. font-size: 12px;
  80. }
  81. </style>