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. TJOI2017DNA

    P3763 [TJOI2017]DNA 字符串匹配,字符集大小为\(4\),认为相差不超过\(3\)即合法. 对每一种字符分开考虑不同产生的贡献. 对于串\(S\),如果当前位置相同则\(S_i=1\ ...

  2. bio,nio,aio的区别 select,poll,epoll的区别

    先了解一些基本概念,什么是socket?什么是I/O操作 unix(like)世界里,一切皆文件,而文件是什么呢?文件就是一串二进制流而已,不管socket,还是FIFO.管道.终端,对我们来说,一切 ...

  3. java数据结构4--集合Set

    Set接口 Set接口用来表示:一个不包含“重复元素”的集合Set接口中并没有定义特殊的方法,其方法多数都和Collection接口相同. 重复元素的理解:通常理解:拥有相同成员变量的对象称为相同的对 ...

  4. Jenkins自动打包并部署(以java -jar形势运行)

    1.打包 与平常maven项目打包一致,不再赘述 2.杀死原有进程 通过 pid=`ps -ef|grep $APP_NAME|grep -v grep|awk '{print $2}' ` 获取当前 ...

  5. 17.树的子结构(python)

    题目描述 输入两棵二叉树A,B,判断B是不是A的子结构.(ps:我们约定空树不是任意一个树的子结构) class Solution: def HasSubtree(self, pRoot1, pRoo ...

  6. 18. ClustrixDB 管理CPU资源

    作为一个分布式MPP数据库,ClustrixDB能够利用多个节点和核心来比单节点数据库更快地处理查询.有两个可调进程可以促进这一点. Clustrix选择了一组默认参数来控制那些提供最常见工作负载的进 ...

  7. 9. ClustrixDB主从复制

    一.在线添加从库 主集群: 10.1.1.23:5306 从集群: 10.1.3.88:5306 主库开启binlog MySQL [(none)]> CREATE BINLOG 'clustr ...

  8. UVa 122 Trees on the level (动态建树 && 层序遍历二叉树)

    题意  :输入一棵二叉树,你的任务是按从上到下.从左到右的顺序输出各个结点的值.每个结 点都按照从根结点到它的移动序列给出(L表示左,R表示右).在输入中,每个结点的左 括号和右括号之间没有空格,相邻 ...

  9. ecshop 的一些常用操作

    ecshop商品详细页显示已售商品数量和评论数量 ecshop增加已售数量和评论数量很简单,步骤如下,原创文章转载请指明同盟者网络<http://blog.sina.com.cn/tomener ...

  10. [CSP-S模拟测试]:异或(数学)

    题目描述 给定$L,R$,我们希望你求出:$$\sum\limits_{i=L}^R\sum\limits_{j=L}^R(i\oplus j)$$其中这里的$\oplus$表示异或运算.答案对$10 ...