Vue路由器历史记录

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

我正在使用 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 button -----------------------------------------+  |
 V                                                          |
user confirms changes                                       |
        |                                                   |
        v                                                   |
/page-1/{id}                                                |
        |                                                   |      
        v                                                   |
     back button -------------------------------------------+

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

非常感谢。

更新

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

https://www.npmjs.com/package/vue-router-back-button

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

更新

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

正常状态 (查看页面)-& 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 事件没有被捕获(可能甚至没有被浏览器抛出?)这导致不得不点击两次。

1

如果你想,你可以避免这个问题,而不是使用router.push(这是默认的 vue 路由器),你可以使用router.replace,这将取代当前的 URL 在历史模式与新的。

Userouter.replace('<wanted-route>')instead ofrouter.push('<wanted-route>')

它将如何适用于您的情况(感谢您的快速路线图,非常有用的解释):

router.push(`/page-1/${id}`)
        |
        v
router.push(`/page-1/${id}/overview`) <--------------------+
        |                                                   |
        v                                                   |
user clicks on edit                                         |
        |                                                   |
        v                                                   |
router.push(`/page-1/${id}/overview/edit`) <--------------+ |
 |      |                                                |  |
 |      v                                                |  |
 |  user navigate pages, ex: /page-1/{id}/details/edit   |  |
 |      |                                                |  |
 |      v                                                |  |
 |  back button -----------------------------------------+  |
 V                                                          |
user confirms changes                                       |
        |                                                   |
        v                                                   |
router.replace(`/page-1/${id}`)                             |                   
        |                                                   |      
        v                                                   |
     back button -------------------------------------------+

这将用新的路径对象替换上一个历史记录对象。

原件:

/page-1/{id} -> /page-1/{id}/overview -> /page-1/{id}/overview/edit -> /page-1/{id}

路由器更换:

/page-1/{id} -> /page-1/{id}/overview -> /page-1/{id}

更多信息:https://router.vuejs.org/guide/essentials/navigation.html#replace-current-location

本站系公益性非盈利分享网址,本文来自用户投稿,不代表码文网立场,如若转载,请注明出处

(686)
Regex向前看 向后看和原子团
上一篇
雪花-如何在其名称中引用具有特殊字符的指定表的内部阶段(list of stage names)
下一篇

相关推荐

发表评论

登录 后才能评论

评论列表(81条)