面包屑路由器动态

Question

尝试用breadcrumb制作vuejs时遇到问题，当routes没有parameters时，它可以工作，但对于那些routes需要parameter的人，我不知道如何在parameter中放入breadcrumb

路线

{
        path: '/',
        component: () => import('@/components/kit/index'),
        name: 'Home',
        meta: {
          requiresAuth: false,
          visibleAfterLogin: true,
          breadcrumb: [
              { name: 'Home' }
          ]
        }
      },
      {
        path: '/',
        component: () => import('@/pages/kit/Layout'),
        children: [
          {
            path: 'otherouter/:name',
            name: 'Other',
            components: {
              default: () => import('@/components/kit/Other1'),
              sidebar: () => import('@/components/kit/Sidebar')
            },
            meta: {
              requiresAuth: false,
              visibleAfterLogin: true,
              breadcrumb: [
                { name: 'Home', link: 'Home' },
                { name: 'Other' }
              ]
            }
          },
          {
            path: 'studybook/:book',
            name: 'Kit',
            components: {
              default: () => import('@/components/kit/TypeTrails'),
              sidebar: () => import('@/components/kit/Sidebar')
            },
            meta: {
              requiresAuth: false,
              visibleAfterLogin: true,
              breadcrumb: [
                { name: 'Home', link: 'Home' },
                { name: 'Trilhas', link: 'Other' },
                { name: 'Caderno de estudo' }
              ]
            }
          }
        ]
      }

Breadcrumb.vue

<template>
  <ul class="breadcrumbs">
    <li v-for="(item, index) in breadcrumbList" :key="item.name">
      <icon name="breadcrumb" size="13px" v-if="index === 0" @click="to(item)" />
      <a href="javascript:void(0)" v-if="item.link"  @click="to(item)">{{item.name}} </a>
      <strong v-else>{{item.name}}</strong>
    </li>
  </ul>
</template>

<script>
  export default {
    data(){
      return{
        breadcrumbList: []
      }
    },
    mounted(){
      this.breadcrumbList = this.$route.meta.breadcrumb
    },
    watch: {
      '$route' (){
        this.breadcrumbList = this.$route.meta.breadcrumb
      }
    },
    methods: {
      to(item){
        if(item.link){
          this.$router.push({name: item.link})
        }
      }
    }
  }
</script>

Answer 1

也许为时已晚，但您可以实现这一点，使面包屑成为接收路由对象的函数，例如：

// router file
{
  path: '/items/:id',
  ...,
  meta: {
    breadcrumb: (route) => ([
      { 
        name: 'My Items Index view',
        to: { name: 'ItemIndex' }
      },
      { 
        name: 'My Item Detail view',
        to: { 
          name: 'ItemDetail',
          params: { id: route.params.id }
        }
      }
    ])
  }
}


// app-bar or similar file
export default {
    name:     'AppBar',
      computed: {
        breadcrumb() {
          return this.$route.meta.breadcrumb(this.$route)
        }
      }
    }