简述Vue项目中返回上一页
1、背景
由于Vue所生成的项目叫做单页应用,即SPA,如果还是使用jQuery中的go(-)或back()是行不通的,所以,我们使用到了Vue中的编程式导航。
2、基本使用
- 定义返回按钮:
<el-button type="primary" plain @click="returnPage">{{$t('message.test.return')}}</el-button> - 在methods中定义方法:
/**
* [returnPage 返回按钮]
* @return {[type]} [description]
*/
returnPage() {
// 跳转上一级
// 这个判断用来解决这种情况,当用户没有上一条路由的历史记录,出现点击返回按钮没有反应时,下面的代码用来判断有没有上一条路由的历史记录 如果没有则返回首页
if (window.history.length <= ) {
this.$router.push({ path: "/zh-CN/home" });
return false;
} else {
this.$router.go(-);
}
} - 在Jquery中,我们可以使用以下方法进行返回
window.history.go(-)
3、遇到的问题
暂无
简述Vue项目中返回上一页的更多相关文章
- html中返回上一页的各种写法【转】
超链接返回上一页代码: <a href="#" onClick="javascript :history.back(-1);">返回上一页</ ...
- html中返回上一页
<a href="<a href="javascript :history.back(-1)">返回上一页</a>或<a href=& ...
- vue项目中返回之前页面数据不刷新的问题
利用vue做项目的时候会有让用户选择当前页面的某些数据,然后再跳到下一页,而下一页是根据上一页的数据来的,有时候选择了上一页的不同选项,下一页的数据可能还是之前的 这个就属于vue的数据获取问题 解决 ...
- VUE项目中文件上传兼容IE9
项目使用VUE编写,UI是ElementUI,但是Element的Upload组件是不兼容IE9的.因为IE9中无法使用FormData. 查找资料基本有两种解决方法:1.引入JQuery和jQuer ...
- js中返回上一页失效的解决办法
最近在做移动端的时候,碰到了一个问题,就是点击返回按键,使用history.go(-1)或history.back(-1)不能够生效.于是便寻找其他的方法,终于找到了一位大神的方法如下: if(win ...
- ionic中返回上一页
.controller('NewsCtrl', ["$scope", "$ionicHistory", "$http","$tim ...
- js中返回上一页
<a class="btn btn-danger" href="javascript:history.go(-1);">取消</a>
- vue项目中阻止浏览器返回上一页
vue项目中在某个页面阻止浏览器返回上一页,适用移动端.PC端. 使用场景例如: 首页 与 A页面 来回跳转,那样点击浏览器返回时也会来回跳转,本想当页面在首页的时候就不再返回了,所以这个时候 ...
- vue单页面项目返回上一页无效,链接变化了,但是页面没有变化
在最近的项目中,返回上一页没有效果,经过好久的排查才发现问题,是路由守卫写法不规范导致. 在项目中用路由守卫做了登录拦截,没登录的跳转到登录页面.页面跳转和拦截都没问题,但是返回上一页就不行了,也没有 ...
随机推荐
- Codeforces Round #593 (Div. 2) C. Labs A. Stones
题目:https://codeforces.com/contest/1236/problem/A 思路:两种操作收益都是3 且都会消耗b 操作2对b消耗较小 则可优先选择操作2 再进行操作1 即可得到 ...
- mac下phpize编译提示Cannot find autoconf解决办法
mac下phpize编译如下报错: /usr/bin/phpizeConfiguring for:PHP Api Version: 20121113Zend Module Api No: 201212 ...
- thinkphp读取器和修改器
读取器 如果在模型中,自定义了方法,那么读取器会读取模型中自定义的方法,否则会调用默认的方法. 写入器
- 在Tomcat中部署Java Web应用程序几种方式
在Tomcat中部署Java Web应用程序有两种方式:静态部署和动态部署.在下文中$CATALINA_HOME指的是Tomcat根目录. 一.静态部署 静态部署指的是我们在服务器启动之前部 ...
- AOP前世与今生,aspect
AOP前世与今生 -------------------------------- 1.代码编写重复,(简单重构) 2.改善 3.静态代理(不改变原代码,继乘原来接口),代理类, aop 最原始出发点 ...
- 配置MongoDB的Windows服务
[1] 创建directorys和files Create a configuration file and a directory path for MongoDB log output (logp ...
- 【BZOJ1098】办公楼biu(补图,bfs,链表)
题意:有n个点m条边,要求将点尽可能多的分成若干个部分,使得若两个点不在同一个部分则他们之间必定有边 n<=1e5,m<=2e6 思路:From https://blog.csdn.net ...
- 【python学习之五】自定义函数实现用 Python 发送电子邮件
前言 之前论坛里有人发过关于发送邮件的帖子,设计器也有关于发送邮件的控件.我这里再次重复,希望能有帮到大家的地方. 信息准备 发送邮件前必须准备好一些基本信息,例如发件人邮箱地址.发件人邮箱密码.收件 ...
- npm安装源修改为淘宝源
npm安装源修改为淘宝源 标签(空格分隔): 编译 原:https://cnodejs.org/topic/4f9904f9407edba21468f31e npm安装源修改为淘宝源 镜像使用方法(三 ...
- python数据类型之 元祖、列表字典
Python中元祖,列表,字典 Python中有3种內建的数据结构:列表.元祖和字典: 1.列表 list是处理一组有序项目的数据结构,即你可以在一个列表中存储一个序列的项目. 列表中的项目应该包 ...