简述Vue项目中返回上一页

1、背景

  由于Vue所生成的项目叫做单页应用,即SPA,如果还是使用jQuery中的go(-1)或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 <= 1) {
        this.$router.push({ path: "/zh-CN/home" });
        return false;
      } else {
        this.$router.go(-1);
      }
    }
  • 在Jquery中,我们可以使用以下方法进行返回
    window.history.go(-1)

3、遇到的问题

  暂无

转载于:https://www.cnblogs.com/wxh0929/p/11532165.html

  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值