如何在Angular中创建面包屑？同路由场景下的实现方案咨询

一、调整路由配置的方案 #

1. 给路由加来源查询参数 #

保持原有的/lessons/:id路由不变，在跳转课程页面时，根据来源页面带上不同的查询参数：

• 从Library进入时，跳转链接设为/lessons/xxx?from=library
• 从Assigned Lessons进入时，跳转链接设为/lessons/xxx?from=assigned

然后在面包屑组件里，读取URL中的from参数，动态生成对应路径：

• 当from=library时，渲染 Home > Library > Lessons > 课程名称
• 当from=assigned时，渲染 Assigned Lessons > 课程名称

这种方式不用改现有路由结构，只是跳转时多传个参数，实现成本最低。

2. 配置两个路由入口指向同一组件 #

直接创建两个不同的路由路径，都指向课程详情组件：

// 示例路由配置（以Vue Router为例）
const routes = [
  // Library入口的课程路由
  {
    path: '/library/lessons/:id',
    component: LessonDetail,
    meta: {
      breadcrumb: ['Home', 'Library', 'Lessons']
    }
  },
  // Assigned Lessons入口的课程路由
  {
    path: '/assigned/lessons/:id',
    component: LessonDetail,
    meta: {
      breadcrumb: ['Assigned Lessons']
    }
  }
]

这样路由层级本身就区分了来源，面包屑可以直接读取路由meta里的基础路径，再拼接当前课程名称即可。完全避免重定向问题，因为两个路由是独立的，只是复用同一个组件。

二、脱离路由依赖的实现方式 #

1. 用全局状态传递面包屑信息 #

借助项目里的状态管理工具（比如Vuex、Redux、React Context），在跳转课程页面时，手动设置当前面包屑的完整路径：

• 从Library列表点击课程时，把面包屑数组['Home', 'Library', 'Lessons', 课程名称]存入全局状态
• 从Assigned Lessons列表点击时，存入['Assigned Lessons', 课程名称]

面包屑组件直接读取全局状态里的数组，循环渲染即可。这种方式完全不依赖路由配置，适合路由结构复杂、不想改动路由的场景。

2. 跳转时通过路由state传递面包屑数据 #

在跳转课程页面时，通过路由的state参数（非URL可见的参数）传递面包屑信息：

// React示例
history.push({
  pathname: '/lessons/xxx',
  state: {
    breadcrumb: ['Assigned Lessons', 'Lesson Name']
  }
})

// Vue示例
this.$router.push({
  path: '/lessons/xxx',
  state: {
    breadcrumb: ['Assigned Lessons', 'Lesson Name']
  }
})

然后在课程页面的面包屑组件里，读取路由的state值，渲染对应的路径。这种方式不用改路由也不用全局状态，适合临时场景，但要注意页面刷新后state会丢失（可以配合localStorage做持久化）。

内容的提问来源于stack exchange，提问作者Berkay Yıldız