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

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.forEach((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>

Answer 3

这对我来说非常有效！

const getBreadcrumbs = () => {
  const route = useRoute()

  const pathArray = route.path.split('/')
  pathArray.shift()
  const breadcrumbs = pathArray.reduce((breadcrumbArray, path, idx) => {
    breadcrumbArray.push({
      to: !!breadcrumbArray[idx - 1]
        ? breadcrumbArray[idx - 1].to + '/' + path
        : '/' + path,
      title: path.toString().replace('-', ' '),
    })
    return breadcrumbArray
  }, [])
  return breadcrumbs
}

Answer 4

我已经在Nuxt 3中回答了这个问题： 你可以从中得到启发...

这是脚本设置代码：

<script setup>
const route = useRoute();
const router = useRouter();

const crumbsRoute = computed(() => {
  let fullPath = "";
  const routes = route.fullPath.substring(1).split("/");
  return routes
    .map((route) => {
      if (route) {
        fullPath = `${fullPath}/${route}`;
        return router.resolve(fullPath);
      }
    })
    .filter(Boolean);
});
</script>

这是模板代码：

<template>
  <ul class="flex items-center">
    <li
      v-for="(crumb, index) in crumbsRoute"
      :key="crumb.name"
      class="flex items-center gap-2">
      <base-icon
        icon-path="Arrow"
        svg-class="w-4"
        class="stroke-beta-gray-100"></base-icon>
      <nuxt-link
        :to="{ name: crumb.name }"
        class="text-beta-gray-150"
        :class="{ 'text-beta-gray-500': index === crumbsRoute.length - 1 }"
        >{{ crumb.meta.breadcrumbs }}</nuxt-link
      >
    </li>
  </ul>
</template>

在此方法中，您应该将面包屑标签放在页面中的

definePageMeta()

可组合项上，如下所示：

// in this page => localhost:3000/about-us/  
definePageMeta({
  name: "aboutUs",
  breadcrumbs: "about us",
});

所以你可以在任何你想要的地方添加这个组件:)