我正在使用 Vue 2，当导航回来时，我有一些历史问题。

我有以下几点：

/page-1/{id}
        |
        v
/page-1/{id}/overview
        |
        v
user clicks on edit
        |
        v
/page-1/{id}/overview/edit
        |
        v
user navigate pages, example /page-1/{id}/details/edit
        |
        v
user confirms changes
        |
        v
/page-1/{id}

相反,我希望能够回到进入编辑模式之前访问的路线:/page-1/{id}/overview。

/page-1/{id}
        |
        v
/page-1/{id}/overview <-------------------------------------+
        |                                                   |
        v                                                   |
user clicks on edit                                         |
        |                                                   |
        v                                                   |
/page-1/{id}/overview/edit <-----------------------------+  |
 |      |                                                |  |
 |      v                                                |  |
 |  user navigate pages, ex: /page-1/{id}/details/edit   |  |
 |      |                                                |  |
 |      v                                                |  |
 |  back on -----------------------------------------+  |
 V                                                          |
user confirms changes                                       |
        |                                                   |
        v                                                   |
/page-1/{id}                                                |
        |                                                   |      
        v                                                   |
     back on -------------------------------------------+

看起来我必须在确认更改时擦除“编辑”历史记录。有没有办法在 vue 中做到这一点?或者为编辑页面创建一个单独的历史记录...

非常感谢。

更新

我发现了一个 npm 包，看起来像是在做我正在寻找的东西

但是，看起来我需要在每次页面访问时重新加载页面以使其正常工作....

更新

好的，找到了一个解决方案，我保留不同的历史，具体取决于我所处的状态：

正常状态 (查看页面)-& gt;使用历史

编辑状态-& gt;使用 editHistory

当我们从编辑状态移出时，编辑历史记录将被删除，我们将返回到常规历史记录。

/page-1/{id} -> /page-1/{id}/overview                   History[
                                                            /page-1/{id},
                                                            /page-1/{id}/overview
                                                        ]
/page-1/{id}/overview -> /page-1/{id}/overview/edit     EditHistory[
                                                           /page-1/{id}/overview/edit
                                                        ] (switch to edit history)
/page-1/{id}/overview/edit -> /page-1/{id}/details/edit   EditHistory[
                                                           /page-1/{id}/overview,
                                                           /page-1/{id}/overview/edit,                                      /page-1/{id}/details/edit
                                                        ]
/page-1/{id}/overview/edit <- /page-1/{id}/details/edit   EditHistory[
                                                           /page-1/{id}/overview/edit
                                                        ]
User save                                               EditHistory[
                                                        ] (switch to history)
/page-1/{id}/overview/                                  User is now at the most recent entry in the history
If the user saved in the  /page-1/{id}/overview/details/edit page, then the edit history is erased and the url /page-1/{id}/overview/details/ will be pushed in the History:
History[
    /page-1/{id},
    /page-1/{id}/overview,
    /page-1/{id}/details,
]
If now the user clicks back it will be sent back to the overview :)

顺便说一句，似乎工作得很好，但由于某种原因，有时 popState 事件没有被捕获（可能甚至没有被浏览器抛出？）这导致不得不点击两次。