Vue.js中,如何自己维护路由跳转记录?
在Vue的项目中,如果我们想要做返回、回退操作时,一般会调用router.go(n)
这个api,但是实际操作中,使用这个api有风险,就是会让用户跳出当前应用,因为它记录的是浏览器的访问记录,而不是你当前应用的访问记录,这是非常可怕的事情。
解决方案就是,我们自己来维护一份history跳转记录。
案例与使用场景
代码地址:https://github.com/dora-zc/mini-vue-mall
这是一个基于Vue.js的小型商城案例,应用场景:
- 自己实现一个Vue插件
src/utils/history.js
,通过堆栈的方式维护页面跳转的历史记录,控制返回跳转 - 点击返回按钮是出栈操作
- 在全局路由router.js 中,实例化路由前,通过原型扩展router的back()方法
- 在全局afterEach中存放历史记录
代码实现
实现history插件,维护历史记录
// src/utils/history.jsconst 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.jsimport 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
转载于:https://www.cnblogs.com/dora-zc/p/10888071.html
Vue.js中,如何自己维护路由跳转记录?相关推荐
- 前端笔记-vue cli中使用router-link进行路由跳转
目录 以前的方法 新方法 以前的方法 以前是通过router的push进行跳转,代码如下: <template><div class="XXXXXXXXXXXXXXXXX& ...
- Vue中this.$router.push路由跳转,刷新参数消失
Vue中this.$router.push路由跳转,刷新参数消失 this.$router.push({name:"",params:{id:""}}) nam ...
- Vue.js中的MVVM
MVVM的理解 MVVM拆开来即为Model-View-ViewModel,有View,ViewModel,Model三部分组成.View层代表的是视图.模版,负责将数据模型转化为UI展现出来.Mod ...
- vue.js中mock本地json数据
vue.js中mock本地json数据 新版本的vue项目中已经将dev-server.js,dev-client.js两个js文件合并到了webpack.dev.conf.js文件中,以下分别是新旧 ...
- php动态写入vue,Vue.js中使用动态组件的方法
本文介绍了如何在Vue.js中引用组件中的HTML元素.您可以通过使用Vue路由器或创建动态组件来切换视图或组件模板. Vue路由器用于在DOM中的视图或组件模板之间导航.要使用Vue路由器,请在ro ...
- html5怎么改为vue_是否还在疑惑Vue.js中组件的data为什么是函数类型而不是对象类型...
点击上方"前端印象",选择"设为星标"第一时间关注技术干货! 引言 要理解本篇文章,必须具备JavaScript中基本数据类型和引用数据类型的概念,大家可以花两 ...
- echarts怎么用在php,在Vue.JS中怎样使用echarts
这次给大家带来在Vue.JS中怎样使用echarts,在Vue.JS中使用echarts的注意事项有哪些,下面就是实战案例,一起来看一下. 上篇文章给大家介绍了 在 webpack 中使用 EChar ...
- VUE.js 中取得后台原生HTML字符串 原样显示问题
今天使用vue调试页面,发现了页面上的一个问题,后台数据传过来的HTML字符串并没有被转换为正常的HTML代码,一拍脑门,发现忘记转换了,于是满心欢喜加上了{{{}}}.但是之后构建发现报错: 为此去 ...
- 浅析Vue.js 中的条件渲染指令
1 应用于单个元素 Vue.js 中的条件渲染指令可以根据表达式的值,来决定在 DOM 中是渲染还是销毁元素或组件. html: <div id="app"> < ...
最新文章
- 我还不懂什么是分布式事务
- Spring 3.1 Environment Profiles--转载
- android 闪退解决方案,Android apk无法安装及闪退问题解决办法
- CentOS,重启的常用命令
- python 读取xml表结构数据_Python从XML-fi读取数据
- c#:winform中多线程的使用
- 一起谈.NET技术,asp.net页面中输出变量、Eval数据绑定等总结
- java之接口interface
- 物联网解决方案应用之智能安防运维解决方案
- C#andSql获取当前日期格式
- C# 文件大小字节byte换算为 Kb Mb Gb Tb
- Win10如何修改外接显示器分辨率
- 2020搞一个副业项目需要什么技能?
- 在maven中创建jsp依赖
- 自定义icon,在iconfont.css中引入自定义图标
- TexStudio 英文拼写检查 语法检查
- Windows 底下安装 git Server: Bonobo Git Server
- div+css静态网页设计 web网页设计实例作业 ——茶叶文化-适应响应(12页) 学生HTML个人网页作业作品下载
- Windows 怎样删除windows.old
- 制造业MES系统如何管理生产车间
热门文章
- bzoj 1014 火星人prefix —— splay+hash
- 多线程日记(17.5.3)
- Module not found: Error: Can‘t resolve ‘querystring‘ in
- 【博客项目】—Joi(八)
- 你可能没有想过自己缺钱花的原因
- 养老金上涨后,退休老人每个月6500元的养老金,属于什么水平?
- 为什么现在很多公司和员工签订了合同之后都不给员工一份?
- iPhone8用的全面屏是什么屏幕?
- 一个女人不收拾厨房,卫生间便池也不刷,为什么老公也不嫌弃?
- 小舅子的工作每周轮换一次