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. jmeter之csv文件参数化

    1.准备好CSV文件,记下路径 2.点击测试计划或者线程组,添加配置元件 ——CSV Data Set Config 3.填写相关参数 4.使用参数

  2. webpack多页应用

    本文主要讲了webpack怎么搭建多页应用,熟悉下webpack的基本用法. 新建文件夹,目录结构如下: 然后 cd webpack-test npm init(根目录下创建了一个pakage.jso ...

  3. 前端每日实战:157# 视频演示如何用纯 CSS 创作一个棋盘错觉动画(实际上每一行都是平行的)

    效果预览 按下右侧的"点击预览"按钮可以在当前页面预览,点击链接可以全屏预览. https://codepen.io/comehope/pen/VEyoGj 可交互视频 此视频是可 ...

  4. JVM垃圾回收之CMS收集器

    从前文JVM垃圾回收几种常见算法和常见收集器我们知道,CMS是老年代垃圾收集器.CMS 收集器主要关注系统停顿时间.CMS 是 Concurrent Mark Sweep 的缩写,意为并发标记清除,从 ...

  5. 在centos7.5使用DockerFile构建镜像时报错“Error parsing reference: "microsoft/dotnet:2.2-aspnetcore-runtime AS base" is not a valid repository/tag: invalid reference format”

    运行dockerfile时报出的错误 FROM microsoft/dotnet:2.2-aspnetcore-runtime AS base Error parsing reference: &qu ...

  6. R语言-八皇后问题

    老师给我出了个暑期作业:用R语言解决八皇后问题. 八皇后问题:国际象棋棋盘(8×8)上放8个“后”,使8个“后”之间互相不能被进攻.(即:每个“后”所在行.列.两条斜线都没有其它子) 查看网上,大多用 ...

  7. SpringCloud微服务面试题

    spring data是spring用于简化spring开发中数据访问操作的项目spring Dataspring Data为我们提供了使用统一的API来对数据访问层进行操作,这主要是Spring D ...

  8. 对Canvas的研究

    1.标签定义图形,比如图表和其他图像,您必须使用脚本来绘制图形. 什么是 canvas? HTML5 <canvas> 元素用于图形的绘制,通过脚本 (通常是JavaScript)来完成. ...

  9. idea万能快捷键,你不知道的17个实用技巧!!!

    IDEA里有一个万能快捷键(alt enter),功能非常强大,同一个快捷键,可以根据不同的语境提示你不同的操作,很多人可能还不了解这些功能,在处理代码的时候还手动处理,了解这些技巧之后,你编码也是一 ...

  10. js 页面 保持状态 的方法

    A -> B 带参数进去B页面, 刷新B页面还  保持状态 单机下一页, 改变请求参数, A->B 不带参数进去B页面 (不存在)当前状态保存在cookies中, 刷新页面,判断cooki ...