如何用Vue实现关联页面多级跳转，实现页面下钻功能？

本文共计3109个文字，预计阅读时间需要13分钟。

背景：在项目开发过程中，经常会遇到从上一页面跳转到下一页面的需求。需求：例如，在概览页面查看数据时，需要查看详细信息，点击某个图表或按钮，即可跳转到详情页面查看详情。

背景

在项目开发过程中，经常会遇到从上一个页面跳转到下一个页面的需求，俗称 下钻 。比如在概览页面的数据，需要查看详情，点击某个图表或按钮，即可跳转到详情页面查看详情数据。

目前为止，我们的项目中还没有一个统一的页面跳转方法，实现页面跳转的方式也因人而异，并且现有的很多项目只能在两个页面之间来回跳转，基本没有完整的实现多个页面互相跳转的功能。

关联页面跳转做为项目的常用功能，并且执行的都是重复性高的代码逻辑，非常有必要把相关的逻辑抽出来，封装成简单易用的公共方法和公共组件。

目的

统一各个项目的关联跳转方法逻辑，封装成简单易用的公共组件。

方案设计

首先，分析一下关联页面跳转大概的逻辑步骤：

1. 进入 页面 A ;
2. 从 页面A 跳转到 页面 B ;
3. 进入 页面 B ;
4. 返回 页面 A ;
5. 进入 页面 A ，即重新回到步骤 1 开始。