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 相关文章推荐
JavaScript 申明函数的三种方法 每个函数就是一个对象(一)
Dec 04 Javascript
Js切换功能的简单方法
Nov 23 Javascript
js弹出窗口之弹出层的小例子
Jun 17 Javascript
使用闭包对setTimeout进行简单封装避免出错
Jul 10 Javascript
jquery设置text的值示例(设置文本框 DIV 表单值)
Jan 06 Javascript
JS 获取鼠标左右键的键值方法
Oct 11 Javascript
Javascript中3个需要注意的运算符
Apr 02 Javascript
JS实现不规则TAB选项卡效果代码
Sep 16 Javascript
Node.js连接MongoDB数据库产生的问题
Feb 08 Javascript
Vue2.0如何发布项目实战
Jul 27 Javascript
vue中element-ui表格缩略图悬浮放大功能的实例代码
Jun 26 Javascript
JavaScript实现队列结构过程
Dec 06 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 curl_setopt()函数实例代码与参数分析
2011/06/02 PHP
PHP的一个完美GIF等比缩放类,附带去除缩放黑背景
2014/04/01 PHP
php结合正则获取字符串中数字
2015/06/19 PHP
浅谈php+phpStorm+xdebug配置方法
2015/09/17 PHP
php实现微信扫码自动登陆与注册功能
2016/09/22 PHP
php+ajax简单实现全选删除的方法
2016/12/06 PHP
php读取XML的常见方法实例总结
2017/04/25 PHP
浅谈PHP发送HTTP请求的几种方式
2017/07/25 PHP
laravel-admin表单提交隐藏一些数据,回调时获取数据的方法
2019/10/08 PHP
AJAX使用了UpdatePanel后无法使用alert弹出脚本
2010/04/02 Javascript
Javascript控制页面链接在新窗口打开具体方法
2013/08/16 Javascript
javascript生成json数据简单示例分享
2014/02/14 Javascript
js 赋值包含单引号双引号问题的解决方法
2014/02/26 Javascript
JS实现很酷的水波文字特效实例
2015/02/26 Javascript
JavaScript中反正弦函数Math.asin()的使用简介
2015/06/14 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
2016/12/14 Javascript
详解前后端分离之VueJS前端
2017/05/24 Javascript
详解基于Node.js的微信JS-SDK后端接口实现代码
2017/07/15 Javascript
深入理解Vue transition源码分析
2017/07/30 Javascript
js导出Excel表格超出26位英文字符的解决方法ES6
2017/11/15 Javascript
vue 文件目录结构详解
2017/11/24 Javascript
微信小程序网络请求封装示例
2018/07/24 Javascript
JS如何获取地址栏的参数实例讲解
2018/10/06 Javascript
详解服务端预渲染之Nuxt(介绍篇)
2019/04/07 Javascript
js判断在哪个浏览器打开项目的方法
2020/01/21 Javascript
node.JS事件机制与events事件模块的使用方法详解
2020/02/06 Javascript
Vue项目接入Paypal实现示例详解
2020/06/04 Javascript
vue循环中点击选中再点击取消(单选)的实现
2020/09/10 Javascript
Python实现破解12306图片验证码的方法分析
2017/12/29 Python
python3实现字符串操作的实例代码
2019/04/16 Python
Jupyter notebook如何修改平台字体
2020/05/13 Python
介绍一下.NET构架下remoting和webservice
2014/05/08 面试题
聘任证明怎么写
2015/03/02 职场文书
家庭聚会祝酒词
2015/08/11 职场文书
Python中第三方库Faker的使用详解
2022/04/02 Python
联想win10摄像头打不开怎么办?win10笔记本摄像头打不开解决办法
2022/04/08 数码科技