VueJS是否有类似React Router的Route组件实现面包屑路由匹配？

首先明确：Vue Router不存在React Router那种可在模板内直接用于路径匹配的<Route>组件。不过可以通过以下两种方式实现类似的集中式面包屑定义，避免创建大量小型组件：

方案一：基于路由元信息（meta）的通用面包屑组件 #

这是Vue生态中最常用的方案，无需额外封装组件，通过路由配置统一管理面包屑信息：

1. 在路由配置中添加面包屑元信息

const routes = [
  {
    path: '/users',
    component: Users,
    meta: {
      breadcrumb: {
        label: 'Users',
        icon: 'FaUsers' // 可直接传入组件，需确保全局注册或局部引入
      }
    },
    children: [
      {
        path: 'new',
        component: UserNew,
        meta: {
          breadcrumb: {
            label: 'Add',
            icon: 'FaUserPlus'
          }
        }
      }
    ]
  }
]

2. 编写通用的Breadcrumbs组件
   该组件会自动遍历当前路由的层级链，解析meta中的面包屑信息并渲染：

<template>
  <div class="breadcrumbs">
    <router-link
      v-for="(crumb, index) in breadcrumbList"
      :key="index"
      :to="crumb.path"
      class="breadcrumb-item"
    >
      <component v-if="crumb.icon" :is="crumb.icon" class="breadcrumb-icon" />
      {{ crumb.label }}
    </router-link>
  </div>
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'
import { FaUsers, FaUserPlus } from '@fortawesome/free-solid-svg-icons'

const route = useRoute()

const breadcrumbList = computed(() => {
  return route.matched.map(item => {
    const meta = item.meta.breadcrumb || {}
    return {
      path: item.path,
      label: meta.label || '',
      icon: meta.icon
    }
  })
})
</script>

3. 在页面中使用
   直接在布局组件中插入该通用组件即可，无需在路由中配置多个breadcrumbs视图：

<template>
  <div class="layout">
    <Breadcrumbs />
    <router-view />
  </div>
</template>

方案二：封装自定义<RouteMatch>组件模拟React Route功能 #

如果想要完全复刻React那种模板内集中定义的写法，可以自己封装一个简单的路径匹配组件：

1. 封装<RouteMatch>组件

<template>
  <slot v-if="isMatched" />
</template>

<script setup>
import { computed } from 'vue'
import { useRoute } from 'vue-router'

const props = defineProps({
  path: {
    type: String,
    required: true
  },
  exact: {
    type: Boolean,
    default: false
  }
})

const route = useRoute()

const isMatched = computed(() => {
  if (props.exact) {
    return route.path === props.path
  }
  return route.path.startsWith(props.path)
})
</script>

2. 集中式定义面包屑
   现在就能像React那样在模板里集中写面包屑的匹配逻辑了：

<template>
  <div class="breadcrumbs">
    <RouteMatch path="/users">
      <router-link to="/users" class="breadcrumb-item">
        <FaUsers /> Users
      </router-link>
      <RouteMatch path="/users/new">
        <router-link to="/users/new" class="breadcrumb-item">
          <FaUserPlus /> Add
        </router-link>
      </RouteMatch>
    </RouteMatch>
  </div>
</template>

<script setup>
import RouteMatch from './RouteMatch.vue'
import { FaUsers, FaUserPlus } from '@fortawesome/free-solid-svg-icons'
</script>

这种方式完全符合你想要的「HTML内集中定义」需求，且只需封装一个通用的<RouteMatch>组件，不用为每个面包屑模式创建单独组件。

内容的提问来源于stack exchange，提问作者whiterook6