前言
在使用 Vue.js 开发前端应用时，常常需要实现路由的前进和后退功能。Vue.js 已经提供了一套完整的路由解决方案 Vue Router，但是 Vue Router 默认只提供了前进功能，没有提供后退功能。要实现后退功能，我们可以使用第三方 npm 包 vue-router-backward。
vue-router-backward 是一款给 Vue Router 添加浏览器历史记录后退功能的插件。本篇文章将介绍如何使用 vue-router-backward 实现前进和后退功能。
安装
安装 vue-router-backward 很简单，只需要使用 npm 即可：
npm install vue-router-backward --save
使用
安装完成后，在 main.js 中引入 vue-router 和 vue-router-backward：
import Vue from 'vue' import VueRouter from 'vue-router' import VueRouterBackward from 'vue-router-backward' Vue.use(VueRouter) Vue.use(VueRouterBackward)
之后就可以在 VueRouter 中使用 $backward() 方法了，如果要执行后退操作，只需要在事件中调用该方法：
this.$router.back() // 前进 this.$router.$backward() // 后退
注意：在调用 $backward() 方法前，需要确保该方法所在的组件已被缓存。
下面示例代码演示了如何在页头组件中添加前进后退按钮和事件处理：
-- -------------------- ---- -------
----------
-----
------- -------------------------
------- -----------------------
------
-----------
--------
------ ------- -
----- ---------
-------- -
------ -
------------------------
--
---- -
---------------------------
-
-
-
---------总结
通过本文的介绍，你应该已经掌握了 vue-router-backward 的使用方法，可以在 Vue.js 应用中实现前进和后退功能。vue-router-backward 的使用非常简单，只需要在安装后引入并在事件中调用 $backward() 方法即可。
当然，vue-router-backward 仅仅是一个小小的插件，Vue.js 内置的路由管理器 Vue Router 具有更为完整的路由解决方案，如果您想深入了解 Vue Router，请参阅官方文档。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600671cc30d09270238228be