Vue - 判断页面返回上一页时是否可返回，如不可返回则跳转到首页或其他页（路由 $router.back(-1) 回退时如何判断有没有上一个路由）如果有历史记录则返回上一页，反之跳转到首页

已于 2025-01-19 15:28:19 修改
阅读量4.3k 收藏 5
点赞数 3
CC 4.0 BY-SA版权
分类专栏： + Vue + Vue2 开发问题汇总 文章标签： vue.js javascript 前端 router nuxt.js
于 2022-08-24 23:01:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/126468063
+ Vue 同时被 2 个专栏收录
251 篇文章 ¥9.90 ¥99.00
订阅专栏
+ Vue2 开发问题汇总
119 篇文章 ¥9.90 ¥99.00
订阅专栏

前言

这种需求常见于详情页，顶部左侧有个 < 返回上一页功能，但很可能是用户分享的链接，直接打开的详情页是并没有上一页路由历史记录的， 所以点击返回按钮没有反应。

在 vue2 / vue3 / nuxt 网站开发中，详细实现判断上一页是否存在历史记录，如果存在则返回，反之直接跳转到首页。解决直接打开详情页时，没有上一级导致返回失效问题。

直接复制示例代码，测试即可。

在这里插入图片描述

解决方案

在页

了解本专栏 订阅专栏 解锁全文
【vue-router源码】八、router.go、router.back、router.forward源码解析
MAXLZ的博客
06-10 4176
【vue-router源码】系列文章将带你从0开始了解vue-router的具体实现。本篇文章将介绍router。go、router.back、router.forward的实现。
vue前端项目--路由vue-router
As_Yua的博客
08-07 1050
早期的网站开发中，服务器负责生成完整的 HTML 页面，并将其发送给客户端展示。每个 URL 对应一个特定的控制器(Controller)，该控制器负责处理请求并生成相应的 HTML 内容。这种方式有利于搜索引擎优化（SEO），因为搜索引擎可以轻松抓取完整的 HTML 内容。缺点是页面更新时需要重新加载整个页面，导致用户体验不佳，且 HTML 和业务逻辑混杂在一起，难以维护。随着 Ajax 技术的出现，前后端分离成为可能。
vue路由判断页面是否有上一页，没有上一页点击返回返回到项目首页
qq_35469137的博客
08-23 1065
这种情况通常发生在直接分享页面链接，当前页面并没有上一页，点击返回会直接将地址栏清空，所以我们可以判断页面是否有上一页，没有上一页点击返回返回到项目首页，或者没有上一页时隐藏返回按钮。这个判断有无首页时，定义一个变量控制返回按钮的显隐即可。
vue返回上一页，判断当前页有无上一页
weixin_43923808的博客
02-28 3188
vue返回上一页，判断当前页有无上一页
vue3项目——使用router.back()方法后，在进入的页面获取前一个路由信息
最新发布
抓住IT的尾巴的博客
07-15 183
router.back() 返回修改页面后获取前一个页面的路由信息。
vue-router判断是否存在上一个路由以及用户是否回到首页
ddmt0000的博客
04-28 1724
可以设置一个全局前置守卫beforeEach，vue路由的起始路径就是/，可以判断to.path === '/'，但是这样还不够，因为用户也可以通过很多方式回到根目录（可能是首页），所以我们还需要判断是否存在上一跳，这里用
vue单页项目中判断有没有上一页
前端小师姐迪迪_的博客
01-28 7847
场景：判断一个页面有没有上一页，没有就关闭页面，有的话就返回上一页 测试了多种方法后，最后用window.sesstionStorage 结合router.afterEach实现了。 我解决的思路： 1）用window.history.length，如果 =1则是关闭页面，否则是返回上一页。最后发现history.length只增不减，它只记录你一共看了多少个页面；放弃； 2）用document.referrer.它的值为url,当前页面就是从这个 url 所代表的页面跳转或打开的.但是我发现我的项目中.
vue中如何点击返回上一页，vue判断没有上页返回首页
鹏仔工作室的秘密基地
02-05 2409
vue中如何点击返回上一页，vue判断没有上页返回首页 vue中返回上一页 // 返回 returnBtn(){ this.$router.go(-1); }, 返回上一页，先判断是否有上一页，没有则返回指定页面 // 返回 returnBtn(){ if (window.history.length <= 1) { this.$router.push({path:'/'}); return false } else { this.$router
Vue生命周期activated之返回上一页不重新请求数据操作
10-15
Vue生命周期中的`activated`函数是在组件被`keep-alive`组件缓存后，当组件再次被激活（例如从其他页面返回）时调用的。在实际开发中，它常用于处理页面返回时需要保持的数据或者状态，以避免重复请求数据。 在描述...
vue2 this.$router.replace跳转后不可以返回上一页面怎样实现
10-09
Vue 2 中，`this.$router.replace` 方法通常用于做无页面刷新的定向跳转，但它确实不会像传统的`history.pushState`或`location.href`那样添加一条记录到浏览器的历史堆栈，因此按回退键无法直接回到之前的页面。...
2024年vue单页项目中判断有没有上一页_vue判断是否有上一页(2)，腾讯前端开发面试记录
2401_84620231的博客
05-11 782
⾏内元 素和块级元素有什么区别？我发现现有的API不能解决这个问题，不能判断这是不是打开的第一个页面，有没有上一页这个问题。cookies,sessionStorage,localStorage 的区别？Doctype作⽤?了解 this 嘛，bind，call，apply 具体指什么。serviceWorker的使用原理是啥？箭头函数和普通函数有啥区别？Canvas 和 SVG 图形的区别是什么？如何实现浏览器内多个标签页之间的通信？HTML5 的离线储存的使用和原理？简述⼀下src与href的区别？
路由回退，不知道是否还有上一页，怎么处理
秋来九月八
04-01 4453
浏览器回退，不知道历史记录是否有上一页怎么处理
vue3判断历史记录中是否有回退（有的话返回上一页，没有跳转默认页）
weixin_70243424的博客
07-24 1205
【代码】vue3判断历史记录中是否有回退（有的话返回上一页，没有跳转默认页）
vue返回上一页
Bright2017的博客
08-10 5621
vue返回上一页
vue路由跳转,模拟原生网页判断是否回到顶部
姚木木的博客
10-09 290
const router = new VueRouter({ routes: [...], scrollBehavior(to,from,savedPosition){ // return {x:100,y:100} //浏览器以页面的x:100,y:100的位置开始显示 // return{ selector : '.a' } ...
vue返回上一页，如果没有上一页返回首页
曹瑞祥的博客
04-02 2514
methods: { back(){ if (window.history.length <= 1) { this.KaTeX parse error: Expected 'EOF', got '}' at position 66: …se }̲ else { …router.go(-1) } } }, 转载自：https://www.cnblogs.c...
vue中如何检测 用户的返回操作
qq_46634851的博客
03-10 1500
vue中如何检测 用户的返回操作
VUE中页面跳转的常用方式及返回上一页实现的两种方式
前端-尔嵘
06-25 2万+
一、我们知道，如果是一个页面的某些部分切换变化，那不是网页之间的切换，而是子组件的切换；对于页面切换，我们需要知道的是整个页面的内容和路径都发生了改变。在原生JS中我们知道页面切换可以使用location href的方式。而在VUE中有两种常见的切换方式： 一种是router-link to="路径",问号后面是附加的传输数据，对应的页面也的按名字geohash来取。例如 <route...
vue返回上一页(后退)的几种方法与区别
热门推荐
vvv3171071的博客
11-30 8万+
案例： 从a页面=>b页面=>c页面，当前在c页面，执行某方法后可以如同按了浏览器后退键一样返回b页面 方法： 若使用vue-router，this.$router.go(-1)可以回到上一页 this.$router.back() window.history.go(-1) 区别 ①与②的区别是： go(-1): 原页面表单中的内容会丢失： 1. this.$router.go(-1)：后退+刷新； 2. this.$router.go(0)：刷新； 3. this.$route
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

蔡来了

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值