实在没研究明白面包屑导航

[Wdam]

我模仿示例中的用法，在外部标签<pro-layout>中设置:breadcrumb="{ routes: breadcrumb }"，当我删除示例中的这段代码时，面包屑导航就消失了，我使用这个属性，但是没有效果。 这是我的代码片段

<template>
  <pro-layout
    v-model:selectedKeys="baseState.selectedKeys"
    v-model:openKeys="baseState.openKeys"
    v-model:collapsed="baseState.collapsed"
    :fix-siderbar="false"
    iconfont-url="//at.alicdn.com/t/font_2804900_c2k6gsut3fn.js"
    :locale="locale"
    v-bind="state"
    :breadcrumb="{ routes: breadcrumb }"
    :collapsed-button-render="false"
  >
    <template #menuHeaderRender>
      <router-link :to="{ path: '/' }">
        <img src="https://alicdn.antdv.com/v2/assets/logo.1ef800a8.svg" />
        <h1>xxpay4pro-ui</h1>
      </router-link>
    </template>
    <template #rightContentRender>
      <RightContent />
    </template>
    <router-view />
    <!--  -->
    <!-- <h2>{{breadcrumb}}</h2>
      <h2>{{baseState}}</h2> -->
    <template #breadcrumbRender="{ route, params, routes }">
      <span v-if="routes.indexOf(route) === routes.length - 1">
        <SmileOutlined />
        {{ route.breadcrumbName }}
      </span>
      <router-link v-else :to="{ path: route.path, params }">
        <SmileOutlined />
        {{ route.breadcrumbName }}
      </router-link>
    </template>
    <!--  -->
    <template #headerContentRender>
      <div
        style="cursor: pointer; font-size: 16px; background: #f3f5f5"
        @click="
          () => {
            collapsed = !collapsed
          }
        "
      >
        <MenuUnfoldOutlined v-if="collapsed" />
        <MenuFoldOutlined v-else-if="!collapsed" />
        <div class="test"> </div>
      </div>
    </template>
  </pro-layout>
</template>
<script lang="ts">
  import { useRouter } from 'vue-router'
  import { reactive, computed, watchEffect } from 'vue'
  import { getMenuData, clearMenuItem, RouteContextProps } from '@ant-design-vue/pro-layout'

  export default {
    name: 'BasicLayout',
    setup() {
      const router = useRouter()
      const { menuData } = getMenuData(clearMenuItem(router.getRoutes()))
      const baseState = reactive<Omit<RouteContextProps, 'menuData'>>({
        selectedKeys: [],
        openKeys: [],
        // default
        collapsed: false
      })
      const state = reactive({
        layout: 'side',
        navTheme: 'light',
        headerTheme: 'light',
        menuData
      })
      watchEffect(() => {
        if (router.currentRoute) {
          const matched = router.currentRoute.value.matched.concat()
          baseState.selectedKeys = matched.filter((r) => r.name !== 'index').map((r) => r.path)
          baseState.openKeys = matched
            .filter((r) => r.path !== router.currentRoute.value.path)
            .map((r) => r.path)
        }
      })

      const breadcrumb = computed(() =>
        router.currentRoute.value.matched.concat().map((item) => {
          return {
            path: item.path,
            breadcrumbName: item.meta.title || ''
          }
        })
      )
      const handleCollapsed = () => {
        baseState.collapsed = !baseState.collapsed
      }
      console.log(breadcrumb)

      return {
        router,
        breadcrumb,
        state,
        baseState,
        handleCollapsed
      }
    }
  }
</script>

<style scoped>
  #collapsed {
    background: #000;
  }
  .test {
    width: 79px;
    height: 40px;
    background: #dddddd;
    border-radius: 12px;
    margin-top: 5px;
  }
</style>

[sendya]

删除哪一段代码？:breadcrumb="{ routes: breadcrumb }" 这个吗？

[Wdam]

@sendya 是的

[sendya]

pro-layout 的 breadcrumb 属性删了就没有面包屑数据了，还如何展示

[Wdam]

@sendya 我的意思是这段代码是面包屑关键代码，但是在我的项目中却并未奏效，可能是存在什么问题

[sendya]

如果不能提供复现，我是无法给你判断问题的，请提供复现后开新 issue

[Wdam]

使用ant vue 面包屑组件解决

<template #headerContentRender>
......
<div>
          <a-breadcrumb style="padding: 16px 0px 0px 20px; font-size: 16px;">
            <a-breadcrumb-item v-for="(item, index) in breadcrumb" :key="index">
              {{ item.breadcrumbName }}
            </a-breadcrumb-item>
          </a-breadcrumb>
        </div>
<template >
//script
      const breadcrumb = computed(() =>
        router.currentRoute.value.matched.concat().map((item) => {
          return {
            path: item.path,
            breadcrumbName: item.meta.title || ''
          }
        })
      )