Question

大家好，我正在尝试在Nuxt.js中创建动态的“面包屑”，有没有人知道如何工作的示例

我尝试创建一个简单的示例，但是它没有按预期工作，有人可以使用解决方案吗？

<template>
    <div class="breadcrumbs-component-wrapper">
        <b-breadcrumb class="breadcrumbs-holder">
            <b-breadcrumb-item
                v-for="(item, i) in breadcrumbs"
                :key="i"
                :to="item.name"
            >
               Test
            </b-breadcrumb-item>
        </b-breadcrumb>
    </div>
</template>

<script>
export default {
    computed: {
        breadcrumbs() {
            console.log( this.$route.matched);
            return this.$route.matched;
        },
    },
};
</script>

Answer 1

这是我在旧项目中使用的面包屑组件。随时根据您的需求进行调整。使用buefy / bulma。

<template>
  <div class="level">
    <div class="level-left">
      <div class="level-item">
        <a class="button is-white" @click="$router.back()">
          <b-icon icon="chevron-left" size="is-medium" />
        </a>
      </div>
      <div class="level-item">
        <nav class="breadcrumb" aria-label="breadcrumbs">
          <ul>
            <li v-for="(item, i) in crumbs" :key="i" :class="item.classes">
              <nuxt-link :to="item.path">
                {{ item.name }}
              </nuxt-link>
            </li>
          </ul>
        </nav>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    crumbs() {
      const crumbs = []
      this.$route.matched.map((item, i, { length }) => {
        const crumb = {}
        crumb.path = item.path
        crumb.name = this.$i18n.t('route.' + (item.name || item.path))

        // is last item?
        if (i === length - 1) {
          // is param route? .../.../:id
          if (item.regex.keys.length > 0) {
            crumbs.push({
              path: item.path.replace(/\/:[^/:]*$/, ''),
              name: this.$i18n.t('route.' + item.name.replace(/-[^-]*$/, ''))
            })
            crumb.path = this.$route.path
            crumb.name = this.$i18n.t('route.' + this.$route.name, [
              crumb.path.match(/[^/]*$/)[0]
            ])
          }
          crumb.classes = 'is-active'
        }

        crumbs.push(crumb)
      })

      return crumbs
    }
  }
}
</script>

<style lang="scss" scoped>
/deep/ a {
  @include transition();
}
</style>

Answer 2

也许有人需要我在 nuxt.js + vuetify.js 上使用面包屑的经验。

<template>
  <div class="d-inline-flex items-center" v-if="crumbs.length != 0">
    <v-tooltip bottom>
      <template v-slot:activator="{ on, attrs }">
        <v-btn
          small
          text
          plain
          fab
          v-bind="attrs"
          v-on="on"
          @click="$router.back()"
        >
          <v-icon>mdi-arrow-left</v-icon>
        </v-btn>
      </template>
      <span>Back</span>
    </v-tooltip>

    <v-breadcrumbs class="py-0" :items="crumbs"></v-breadcrumbs>
  </div>
</template>

<script>
export default {
  computed: {
    crumbs() {
      const fullPath = this.$route.fullPath
      const params = fullPath.substring(1).split('/')
      params.pop()
      const crumbs = []
      let path = ''
    
      params.forEach((param, index, { length }) => {
        path = `${path}/${param}`
        const match = this.$router.match(path)
        console.log(path)
        if (match.name !== 'index') {
          if (index === length - 1) {
            crumbs.push({
              text: path.replace(/\//g, '-').slice(1),
              disabled: true,
            })
          } else {
            crumbs.push({
              text: path.replace(/\//g, '-').slice(1),
              disabled: false,
              href: path + '/',
            })
          }
        }
      })

      return crumbs
    },
  },
}
</script>

或者，您可以在此处添加 nuxt-i18n

<script>
export default {
  computed: {
    crumbs() {
      const fullPath = this.$route.fullPath
      const params = fullPath.substring(1).split('/')
      params.pop()
      const crumbs = []
      let path = ''
    
      params.forEach((param, index, { length }) => {
        path = `${path}/${param}`
        const match = this.$router.match(path)
        console.log(path)
        if (match.name !== 'index') {
          if (index === length - 1) {
            crumbs.push({
              text: this.$i18n.t('breadcrumbs.' + path.replace(/\//g, '_').slice(1)),
              disabled: true,
            })
          } else {
            crumbs.push({
              text: this.$i18n.t('breadcrumbs.' + path.replace(/\//g, '_').slice(1)),
              disabled: false,
              href: path + '/',
            })
          }
        }
      })

      return crumbs
    },
  },
}
</script>

如何在Nuxt.js中创建动态的“面包屑”

2 个答案: