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项目中返回上一页的更多相关文章

  1. html中返回上一页的各种写法【转】

    超链接返回上一页代码: <a href="#" onClick="javascript :history.back(-1);">返回上一页</ ...

  2. html中返回上一页

    <a href="<a href="javascript :history.back(-1)">返回上一页</a>或<a href=& ...

  3. vue项目中返回之前页面数据不刷新的问题

    利用vue做项目的时候会有让用户选择当前页面的某些数据,然后再跳到下一页,而下一页是根据上一页的数据来的,有时候选择了上一页的不同选项,下一页的数据可能还是之前的 这个就属于vue的数据获取问题 解决 ...

  4. VUE项目中文件上传兼容IE9

    项目使用VUE编写,UI是ElementUI,但是Element的Upload组件是不兼容IE9的.因为IE9中无法使用FormData. 查找资料基本有两种解决方法:1.引入JQuery和jQuer ...

  5. js中返回上一页失效的解决办法

    最近在做移动端的时候,碰到了一个问题,就是点击返回按键,使用history.go(-1)或history.back(-1)不能够生效.于是便寻找其他的方法,终于找到了一位大神的方法如下: if(win ...

  6. ionic中返回上一页

    .controller('NewsCtrl', ["$scope", "$ionicHistory", "$http","$tim ...

  7. js中返回上一页

    <a class="btn btn-danger" href="javascript:history.go(-1);">取消</a>

  8. vue项目中阻止浏览器返回上一页

    vue项目中在某个页面阻止浏览器返回上一页,适用移动端.PC端. 使用场景例如: 首页 与 A页面     来回跳转,那样点击浏览器返回时也会来回跳转,本想当页面在首页的时候就不再返回了,所以这个时候 ...

  9. vue单页面项目返回上一页无效,链接变化了,但是页面没有变化

    在最近的项目中,返回上一页没有效果,经过好久的排查才发现问题,是路由守卫写法不规范导致. 在项目中用路由守卫做了登录拦截,没登录的跳转到登录页面.页面跳转和拦截都没问题,但是返回上一页就不行了,也没有 ...

随机推荐

  1. Codeforces Round #593 (Div. 2) C. Labs A. Stones

    题目:https://codeforces.com/contest/1236/problem/A 思路:两种操作收益都是3 且都会消耗b 操作2对b消耗较小 则可优先选择操作2 再进行操作1 即可得到 ...

  2. mac下phpize编译提示Cannot find autoconf解决办法

    mac下phpize编译如下报错: /usr/bin/phpizeConfiguring for:PHP Api Version: 20121113Zend Module Api No: 201212 ...

  3. thinkphp读取器和修改器

    读取器 如果在模型中,自定义了方法,那么读取器会读取模型中自定义的方法,否则会调用默认的方法. 写入器

  4. 在Tomcat中部署Java Web应用程序几种方式

    在Tomcat中部署Java Web应用程序有两种方式:静态部署和动态部署.在下文中$CATALINA_HOME指的是Tomcat根目录. 一.静态部署      静态部署指的是我们在服务器启动之前部 ...

  5. AOP前世与今生,aspect

    AOP前世与今生 -------------------------------- 1.代码编写重复,(简单重构) 2.改善 3.静态代理(不改变原代码,继乘原来接口),代理类, aop 最原始出发点 ...

  6. 配置MongoDB的Windows服务

    [1] 创建directorys和files Create a configuration file and a directory path for MongoDB log output (logp ...

  7. 【BZOJ1098】办公楼biu(补图,bfs,链表)

    题意:有n个点m条边,要求将点尽可能多的分成若干个部分,使得若两个点不在同一个部分则他们之间必定有边 n<=1e5,m<=2e6 思路:From https://blog.csdn.net ...

  8. 【python学习之五】自定义函数实现用 Python 发送电子邮件

    前言 之前论坛里有人发过关于发送邮件的帖子,设计器也有关于发送邮件的控件.我这里再次重复,希望能有帮到大家的地方. 信息准备 发送邮件前必须准备好一些基本信息,例如发件人邮箱地址.发件人邮箱密码.收件 ...

  9. npm安装源修改为淘宝源

    npm安装源修改为淘宝源 标签(空格分隔): 编译 原:https://cnodejs.org/topic/4f9904f9407edba21468f31e npm安装源修改为淘宝源 镜像使用方法(三 ...

  10. python数据类型之 元祖、列表字典

    Python中元祖,列表,字典   Python中有3种內建的数据结构:列表.元祖和字典: 1.列表 list是处理一组有序项目的数据结构,即你可以在一个列表中存储一个序列的项目. 列表中的项目应该包 ...