在使用 Vue.js 开发单页应用 (SPA) 的过程中，路由系统起到了非常重要的作用。在使用浏览器前进、后退按钮时，我们需要让应用保持用户的操作状态，而不是像传统的多页应用一样跳转到新的页面。本文将介绍如何在 Vue.js 中实现浏览器前进、后退事件对应的路由跳转。
前置知识
在阅读本文前，你需要了解基本的 Vue.js 语法以及路由系统的基础知识。如果你还不了解这些内容，可以先学习官方文档：Vue.js官方文档，Vue Router官方文档。
解决方案
Vue Router 提供了一个名为 scrollBehavior 的选项，可以用来指定页面 如何滚动以及如何恢复页面在重新加载后的滚动位置。
我们可以在 scrollBehavior 中监听浏览器的前进、后退事件，根据这个事件来判断应该跳转到哪个路由。
下面是一个示例代码：
-- -------------------- ---- -------
----- ------ - --- -----------
----- ----------
------- ------
-------------- ---- ----- -------------- -
-- ---------------
-- -------------- --- ----- -
----- -------- - ---
-- -----------------------------------
-- --------------------- --- ------------------- -
---------- - ---------------------
---------- - ---------------------
-
------ ---------
- ---- -
-- ----------------- ---- ----------
-- ----------------
---------------------------- ---------------
------ ---------------------
-
-
--在以上代码中，我们首先判断 savedPosition 是否为 null，如果为 null，则说明当前为用户的正常操作，需要判断当前路由与前一个路由的根路径是否相同，如果相同，就回到之前的滚动位置；如果不相同，则默认回到页面顶部。
如果 savedPosition 不为 null，则说明当前是浏览器前进、后退事件，我们通过 Vuex 存储用户的操作状态 position，然后返回 position，然后根据操作状态跳转到相应的路由。
需要注意的是，我们在 from 中可以通过 meta.position 存储当前路由的滚动位置，如下所示：
const routes = [
{
path: '/',
component: Home,
meta: { position: { x: 0, y: 0 } }
},
...
]总结
本文介绍了在 Vue.js 中如何实现浏览器前进、后退事件对应的路由跳转。通过监听 scrollBehavior 事件，我们可以根据不同的情况跳转到相应的路由，实现 SPA 对用户操作状态的完美保留。
参考链接
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649538ba48841e98942797e9