如何仅用按钮开发决策树？按钮点击跳转页面实现方案咨询

直接针对你的问题给出可落地的实现方案：

1. 分支逻辑搭建方法 #

你这种固定流程的按钮式决策树，选以下两种方式之一即可，不需要引入复杂的全局状态管理：

• 配置化数据驱动（推荐长期迭代场景用）：提前把所有决策节点、跳转关系整理成结构化的配置文件，不用硬写每个分支的判断逻辑。每个节点只需要存3类核心信息：节点唯一ID、页面展示文案、按钮列表（按钮文字、点击后跳转的下一个节点ID），最基础的配置示例如下：

{
  "id": "home",
  "content": "请选择对应场景",
  "buttons": [
    { "label": "场景A", "target": "scene_a_q1" },
    { "label": "场景B", "target": "scene_b_q1" },
    { "label": "场景C", "target": "scene_c_q1" }
  ]
}

实际开发时只需要写一个通用的问题渲染组件，根据当前激活的节点ID拉取对应配置渲染内容，用户点击按钮直接更新当前节点ID即可。后续要调整流程、新增问题，完全不需要改动页面代码，只需要修改配置，维护成本极低。

• 硬编码分支（适合快速出Demo场景用）：如果总节点数很少、流程完全固定不会调整，直接给每个按钮写死点击后的逻辑即可，选“是”跳哪、选“否”跳哪直接写在按钮点击事件里，开发速度最快，不需要提前梳理全量节点映射关系。

实操提醒：写代码前先把设计稿里所有页面的跳转对应关系列成对照表，能有效避免写逻辑时漏分支。

2. 独立Screens+路由绑定方案的可行性 #

完全可行，而且是和你现有原型逻辑匹配度最高、新手最不容易出错的实现方式：

• 你完全可以照着设计稿的页面拆分粒度，每个设计页对应一个独立的Screen组件，给每个页面配置唯一的路由路径，比如首页对应/，场景A的第一个问题对应/scene/a/q1，最终结果页对应/result/xxx。
• 按钮的点击事件直接绑定路由跳转方法即可：Web端用React Router/Vue Router的navigate方法，移动端用对应框架自带的路由API，点击按钮直接跳转到预先绑定好的目标页面，和你在设计工具里给按钮配置on click跳转到对应原型页的逻辑完全一致。
• 这个方案的优缺点非常明确：优点是逻辑直白，每个页面的样式、交互可以单独调整，和设计稿对齐成本极低，不容易出现逻辑串线的bug；缺点是如果决策树节点特别多，会生成大量结构相似的重复页面，后续修改通用按钮样式、页面布局的时候需要挨个调整，比较繁琐。

落地参考建议 #

• 如果你需要快速出可交互Demo、总页面数在20个以内：直接用独立Screens+路由的方案开发，照着设计稿挨个搭页面绑跳转，快的话一天就能跑通全流程。
• 如果你要做正式上线的产品、后续会持续新增决策分支：优先选配置化数据驱动的方案，整个项目只需要写首页、通用问题页、通用结果页3类基础页面，所有流程靠配置驱动，长期维护成本低很多。
• 可以额外给路由加历史栈支持，允许用户点返回回到上一个问题修改选项，不用每次选错都从头开始，使用体验会提升不少。

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