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 控制CSS样式表
Aug 20 Javascript
基于jQuery的消息提示插件之旅 DivAlert(三)
Apr 01 Javascript
读jQuery之二(两种扩展)
Jun 11 Javascript
jquery获取table中的某行全部td的内容方法
Mar 08 Javascript
Javascript 修改String 对象 增加去除空格功能(示例代码)
Nov 30 Javascript
div浮层,滚动条移动,位置保持不变的4种方法汇总
Dec 11 Javascript
javascript使用百度地图api和html5特性获取浏览器位置
Jan 10 Javascript
jQuery提示效果代码分享
Nov 20 Javascript
Javascript基础教程之函数对象和属性
Jan 18 Javascript
ES6学习教程之模板字符串详解
Oct 09 Javascript
微信小程序实现写入读取缓存详解
Aug 30 Javascript
JavaScript实现打字游戏
Feb 19 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
php设计模式 Bridge (桥接模式)
2011/06/26 PHP
php查找字符串出现次数的方法
2014/12/01 PHP
php面向对象与面向过程两种方法给图片添加文字水印
2015/08/26 PHP
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
jquery获取input表单值的代码
2010/04/19 Javascript
基于jquery实现的可以编辑选择的下拉框的代码
2010/11/19 Javascript
jquery绑定原理 简单解析与实现代码分享
2011/09/06 Javascript
jquery实现input输入框实时输入触发事件代码
2014/01/28 Javascript
jQuery scroll事件实现监控滚动条分页示例
2014/04/04 Javascript
对象题目的一个坑 理解Javascript对象
2015/12/22 Javascript
javascript中eval解析JSON字符串
2016/02/27 Javascript
javascript如何定义对象数组
2016/06/07 Javascript
javascript数据类型详解
2017/02/07 Javascript
JavaScript面向对象精要(上部)
2017/09/12 Javascript
Angularjs实现数组随机排序的方法
2018/10/02 Javascript
vue同步父子组件和异步父子组件的生命周期顺序问题
2018/10/07 Javascript
在React中写一个Animation组件为组件进入和离开加上动画/过度效果
2019/06/24 Javascript
解决在layer.open中使用时间控件laydate失败的问题
2019/09/11 Javascript
flexible.js实现移动端rem适配方案
2020/04/07 Javascript
[01:09:16]DOTA2-DPC中国联赛 正赛 SAG vs Dynasty BO3 第一场 1月25日
2021/03/11 DOTA
巧用Python装饰器 免去调用父类构造函数的麻烦
2012/05/18 Python
Python中title()方法的使用简介
2015/05/20 Python
python下实现二叉堆以及堆排序的示例
2017/09/29 Python
基于python 处理中文路径的终极解决方法
2018/04/12 Python
浅谈python中对于json写入txt文件的编码问题
2018/06/07 Python
python获取微信小程序手机号并绑定遇到的坑
2018/11/19 Python
python实现列表中最大最小值输出的示例
2019/07/09 Python
使用python实现学生信息管理系统
2021/02/25 Python
英国50岁以上人群的交友网站:Ourtime
2018/03/28 全球购物
MyHeritage美国:家族史研究和DNA测试的领先服务
2019/05/27 全球购物
一家专门经营包包的英国网站:MyBag
2019/09/08 全球购物
《夕阳真美》教学反思
2014/04/27 职场文书
入党综合考察材料
2014/06/02 职场文书
门店业绩提升方案
2014/06/08 职场文书
支部组织生活会方案
2014/06/10 职场文书
JavaScript架构搭建前端监控如何采集异常数据
2022/06/25 Javascript