Vue.js中该如何自己维护路由跳转记录


Posted in Javascript onMay 19, 2019

前言

在Vue的项目中,如果我们想要做返回、回退操作时,一般会调用router.go(n)这个api,但是实际操作中,使用这个api有风险,就是会让用户跳出当前应用,因为它记录的是浏览器的访问记录,而不是你当前应用的访问记录,这是非常可怕的事情。

解决方案就是,我们自己来维护一份history跳转记录。

案例与使用场景

代码地址:https://github.com/dora-zc/mini-vue-mall (本地下载)

这是一个基于Vue.js的小型商城案例,应用场景:

  1. 自己实现一个Vue插件src/utils/history.js,通过堆栈的方式维护页面跳转的历史记录,控制返回跳转
  2. 点击返回按钮是出栈操作
  3. 在全局路由router.js 中,实例化路由前,通过原型扩展router的back()方法
  4. 在全局afterEach中存放历史记录

代码实现

实现history插件,维护历史记录

// src/utils/history.js

const History = {
 _history: [], // 历史记录堆栈
 install(Vue) {
  // 提供Vue插件所需安装方法
  Object.defineProperty(Vue.prototype, '$routerHistory', {
   get() {
    return History;
   }
  })
 },
 push(path) { // 入栈
  this._history.push(path);
 },
 pop() {
  this._history.pop();
 },
 canBack(){
  return this._history.length > 1;
 }

}
export default History;

在路由实例化之前,扩展back()方法

// src/router.js

import Vue from 'vue'
import Router from 'vue-router'
import History from './utils/history';

Vue.use(Router);
Vue.use(History);

// 实例化之前,扩展Router
Router.prototype.goBack = function () {
 this.isBack = true;
 this.back();
}

在路由全局afterEach中记录跳转历史

// src/router.js

// afterEach记录历史记录
router.afterEach((to, from) => {
 if (router.isBack) {
 // 后退
 History.pop();
 router.isBack = false;
 router.transitionName = 'route-back';
 } else {
 History.push(to.path);
 router.transitionName = 'route-forward';
 }
})

在公用Header组件中使用

// Hearder.vue

<template>
 <div class="header">
 <h1>{{title}}</h1>
 <i v-if="$routerHistory.canBack()" @click="back"></i>
 <div class="extend">
  <slot></slot>
 </div>
 </div>
</template>

<script>
export default {
 props: {
 title: {
  type: String,
  default: ""
 }
 },
 methods: {
 back() {
  this.$router.goBack();
 }
 }
};
</script>

完整代码请查看:https://github.com/dora-zc/mini-vue-mall(本地下载)

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。

Javascript 相关文章推荐
js TextArea的选中区域处理
Dec 28 Javascript
动态获取复选框checkbox选中个数的jquery代码
Jun 25 Javascript
纯JavaScript实现HTML5 Canvas六种特效滤镜示例
Jun 28 Javascript
悬浮数字的实现案例
Feb 19 Javascript
MVC+jQuery.Ajax异步实现增删改查和分页
Dec 22 Javascript
详解vuex 中的 state 在组件中如何监听
May 23 Javascript
让你5分钟掌握9个JavaScript小技巧
Jun 09 Javascript
微信小程序实现运动步数排行功能(可删除)
Jul 05 Javascript
vue使用混入定义全局变量、函数、筛选器的实例代码
Jul 29 Javascript
JavaScript JSON数据处理全集(小结)
Aug 15 Javascript
js计算最大公约数和最小公倍数代码实例
Sep 11 Javascript
小程序角标的添加及绑定购物车数量进行实时更新的实现代码
Dec 07 Javascript
利用Vue实现一个markdown编辑器实例代码
May 19 #Javascript
小程序实现搜索界面 小程序实现推荐搜索列表效果
May 18 #Javascript
微信小程序实现搜索指定景点周边美食、酒店
May 18 #Javascript
vue+高德地图写地图选址组件的方法
May 18 #Javascript
微信小程序实现搜索功能并跳转搜索结果页面
May 18 #Javascript
js实现图片推拉门效果代码实例
May 18 #Javascript
微信小程序代码上传、审核发布小程序
May 18 #Javascript
You might like
ThinkPHP无限级分类原理实现留言与回复功能实例
2014/10/31 PHP
PHP 实现手机端APP支付宝支付功能
2018/06/07 PHP
javascript在一段文字中的光标处插入其他文字
2007/08/26 Javascript
js 模拟气泡屏保效果代码
2010/07/10 Javascript
JavaScript XML和string相互转化实现代码
2011/07/04 Javascript
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
2012/12/21 Javascript
jquery限制输入字数,并提示剩余字数实现代码
2012/12/24 Javascript
jQuery表单获取和失去焦点输入框提示效果的实例代码
2013/08/01 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
2014/06/20 Javascript
Node.js入门教程:在windows和Linux上安装配置Node.js图文教程
2014/08/14 Javascript
JavaScript队列、优先队列与循环队列
2016/11/14 Javascript
Bootstrap3 多选和单选框(checkbox)
2016/12/29 Javascript
详解vue嵌套路由-params传递参数
2017/05/23 Javascript
Vue的Flux框架之Vuex状态管理器
2017/07/30 Javascript
使用veloticy-ui生成文字动画效果
2018/02/08 Javascript
vue element-ui之怎么封装一个自己的组件的详解
2019/05/20 Javascript
Vue.js的模板语法详解
2020/02/16 Javascript
Vue路由切换页面不更新问题解决方案
2020/07/10 Javascript
Python排序搜索基本算法之选择排序实例分析
2017/12/09 Python
python3获取当前目录的实现方法
2019/07/29 Python
Python 读取用户指令和格式化打印实现解析
2019/09/02 Python
Python Numpy 自然数填充数组的实现
2019/11/28 Python
Ubuntu16.04安装python3.6.5步骤详解
2020/01/10 Python
Django 再谈一谈json序列化
2020/03/16 Python
Python如何实现远程方法调用
2020/08/07 Python
python 6行代码制作月历生成器
2020/09/18 Python
Python 操作SQLite数据库的示例
2020/10/16 Python
使用canvas一步步实现图片打码功能的方法
2019/06/17 HTML / CSS
美国最灵活的移动提供商:Tello
2017/07/18 全球购物
英国在线泳装店:Simply Swim
2019/05/05 全球购物
ParcelABC西班牙:包裹运送和快递服务
2019/12/24 全球购物
毕业生的自我评价分享
2013/12/18 职场文书
2014年企业工会工作总结
2014/11/12 职场文书
2015年教师个人业务工作总结
2015/10/23 职场文书
SQLServer中JSON文档型数据的查询问题解决
2021/06/27 SQL Server