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

Posted 2023-02-22

【中文标题】如何在 Nuxt.js 中创建动态“面包屑”

【英文标题】：How to create dynamic 'Breadcrumbs' in Nuxt.js

【发布时间】：2019-12-31 18:29:35

【问题描述】：

大家好，我正在尝试在 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>

【问题讨论】：

见github.com/pratheekhegde/vue-dynamic-breadcrumbs/blob/master/…

Thanx，但我已经看到了，在我的情况下它没有按预期工作:(

【参考方案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>

【参考方案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>