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 相关文章推荐
让回调函数 showResponse 也带上参数的代码
Aug 13 Javascript
javascript 密码强度验证规则、打分、验证(给出前端代码,后端代码可根据强度规则翻译)
May 18 Javascript
js 去掉空格实例 Trim() LTrim() RTrim()
Jan 07 Javascript
php常见的页面跳转方法汇总
Apr 15 Javascript
jQuery validate+artdialog+jquery form实现弹出表单思路详解
Apr 18 Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 Javascript
详解vue2 $watch要注意的问题
Sep 08 Javascript
javaScript canvas实现(画笔大小 颜色 橡皮的实例)
Nov 28 Javascript
深入浅出webpack之externals的使用
Dec 04 Javascript
vue移动端项目缓存问题实践记录
Oct 29 Javascript
vue表单验证你真的会了吗?vue表单验证(form)validate
Apr 07 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 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 函数call_user_func和call_user_func_array用法详解
2014/03/02 PHP
PHP对象递归引用造成内存泄漏分析
2014/08/28 PHP
javascript 表单的友好用户体现
2009/01/07 Javascript
JavaScript this 深入理解
2009/07/30 Javascript
不安全的常用的js写法
2009/09/15 Javascript
编写可维护面向对象的JavaScript代码[翻译]
2011/02/12 Javascript
js替代copy(示例代码)
2013/11/27 Javascript
Jquery中children与find之间的区别详细解析
2013/11/29 Javascript
IE浏览器中图片onload事件无效的解决方法
2014/04/29 Javascript
如何使用jquery easyui创建标签组件
2015/11/18 Javascript
JavaScript中的Object对象学习教程
2016/05/20 Javascript
jQuery中fadein与fadeout方法用法示例
2016/09/16 Javascript
AngularJS实现的回到顶部指令功能实例
2017/05/17 Javascript
jquery加载单文件vue组件的方法
2017/06/20 jQuery
详解用node.js实现简单的反向代理
2017/06/26 Javascript
基于ExtJs在页面上window再调用Window的事件处理方法
2017/07/26 Javascript
微信小程序实现图片懒加载的示例代码
2017/12/13 Javascript
用node-webkit把web应用打包成桌面应用(windows环境)
2018/02/01 Javascript
基于vue展开收起动画的示例代码
2018/07/05 Javascript
详解React中传入组件的props改变时更新组件的几种实现方法
2018/09/13 Javascript
layer实现弹出层自动调节位置
2019/09/05 Javascript
JS实现放大镜效果
2020/09/21 Javascript
[01:27:43]VGJ.S vs TNC Supermajor 败者组 BO3 第三场 6.6
2018/06/07 DOTA
使用PDB模式调试Python程序介绍
2015/04/05 Python
Python爬虫爬取一个网页上的图片地址实例代码
2018/01/16 Python
python pandas时序处理相关功能详解
2019/07/03 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
python 将dicom图片转换成jpg图片的实例
2020/01/13 Python
Python多线程Threading、子线程与守护线程实例详解
2020/03/24 Python
pip安装tensorflow的坑的解决
2020/04/19 Python
ellesse美国官方商店:意大利高级运动服品牌
2019/10/29 全球购物
初级Java程序员面试题
2016/03/03 面试题
外贸业务员求职信范文
2013/12/12 职场文书
Python基础之进程详解
2021/05/21 Python
golang连接MySQl使用sqlx库
2022/04/14 Golang
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android