文档章节

Vue路由的$router.back(-1)回退时如何判断有没有上一个路由

帅的人连bug都讨厌
 帅的人连bug都讨厌
发布于 2017/08/29 13:16
字数 373
阅读 163
收藏 0

现在每个页面的左上角有一个返回按钮<
点击时的代码是this.$router.back(-1),返回上一个路由
但是我们现在有这样一个需求,把其中某一页分享出去,用户打开时并没有上一条路由的历史记录,所以点击<按钮时没有反应。
所以应该怎么判断有没有上一条路由的历史记录。
代码:
routerback: function () {
this.$router.back(-1)
},

默认排序时间排序

3个回答

答案对人有帮助,有参考价值0答案没帮助,是错误的答案,答非所问


已采纳

在页面一开始加上一个全局的函数:

activated: function () {
  this.$setgoindex()
}

这个函数是这样的,判断当前页面的历史记录是不是小于等于1,如果小于等于1,说明这个页面没有可以返回的上一页,如果没有可以返回的上一页,就给地址栏加上一个goindex=true的参数,这样你从这个页面在往下一个页面跳转在返回,这个参数就一直加上的

Vue.prototype.$setgoindex = function () {
  if (window.history.length <= 1) {
    if (location.href.indexOf('?') === -1) {
      window.location.href = location.href + '?goindex=true'
    } else if (location.href.indexOf('?') !== -1 && location.href.indexOf('goindex') === -1) {
      window.location.href = location.href + '&goindex=true'
    }
  }
}

然后在左上角返回按钮加上这个逻辑:

if (this.$route.query.goindex === 'true') {
  this.$router.push('/')
} else {
  this.$router.back(-1)
}

这样就可以了

© 著作权归作者所有

共有 人打赏支持
帅的人连bug都讨厌
粉丝 3
博文 53
码字总数 40134
作品 0
杭州
程序员
Vue2.0之vue-router

一、前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用标签编写链接哪?vue-router如何使用?常见路由操作有哪些?等等这些问题,就是本篇要探讨的主要问题...

浪里行舟
05/21
0
0
关于vue-router那些事

一、前言 要学习vue-router就要先知道这里的路由是什么?为什么我们不能像原来一样直接用标签编写链接哪?vue-router如何使用?常见路由操作有哪些?等等这些问题,就是本篇要探讨的主要问题...

howgod
05/21
0
0
vue-cli 实战中遇到的`坑`

也可能是因为接触vue时间也不长,经常落入不知名的‘坑’中,对于我这个菜鸟来说,每次‘落坑’无疑是一场不小的灾难。前两天有个朋友在问我,在使用中有没有遇到一些很难解决的问题,一下我...

Christine
2017/11/27
0
0
可能比文档还详细--VueRouter完全指北

前言 关于标题,应该算不上是标题党,因为内容真的很多很长很全面.主要是在官网的基础上又详细总结,举例了很多东西.确保所有新人都能理解!所以实际上很多东西是比官网还详细的.你想要的,在官网...

shotCat
08/27
0
0
vue vue-router 完美实现前进刷新,后退不刷新。附scrollBehavior源码解析

需求:在一个vue的项目中,我们需要从一个列表页面点击列表中的某一个详情页面,从详情页面返回不刷新列表,而从列表的上一个页面重新进入列表页面则需要刷新列表。   而浏览器的机制则是每...

前端菜鸟111
07/27
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Bash常用内置变量介绍

Bash常用内置变量介绍 Bash中有很多内置变量,这些变量不仅影响Bash的相关行为,也大大的方便了用户的常见操作。**Bash内置变量大体上包括两类,一类是传统Shell所具备的,另一类就是Bash所特...

小陶小陶
32分钟前
0
0
05-《深度拆解Java虚拟机》之JVM是如何执行方法调用的?(下)

一、问题引入 我们知道,设计模式大量使用了虚方法来实现多态。但是虚方法的性能效率并不高,所以作者就想在此基础上写篇文章,评估每一种设计模式因为虚方法调用而造成的性能开销,并且在文...

飞鱼说编程
52分钟前
3
0
nginx统一入口 多服务出口

nginx配置多ip和端口统一调用入口log_format中$upstream_addr 标识打印转发的url地址配置upstream和locationhttp {include mime.types;default_type application/octet-stream...

GoldenVein
54分钟前
3
0
阿里P9架构师谈:高并发网站的监控系统选型、比较、核心监控指标

在高并发分布式环境下,对于访问量大的业务、接口等,需要及时的监控网站的健康程度,防止网站出现访问缓慢,甚至在特殊情况出现应用服务器雪崩等场景,在高并发场景下网站无法正常访问的情况...

我是你大哥
56分钟前
2
0
华为HiAI 助力苏宁易购,让你尽享完美视觉购物体验!

还在感慨商品照片与实物存在差距,又要退货? 还在抱怨被忽视的图片小细节,影响了生活品质? 想要“买买买”, 又担心海量的商品图片耗光你的流量? 就在近期 搭载HiAI能力的苏宁易购新版上线...

华为终端开放实验室
57分钟前
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部