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

最新推荐文章于 2024-04-28 23:01:48 发布

DW_DJF

最新推荐文章于 2024-04-28 23:01:48 发布

阅读量1.3k

点赞数 1

分类专栏： vue3 文章标签：前端 vue.js

本文链接：https://blog.csdn.net/weixin_43602502/article/details/129596687

版权

vue3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

本文探讨在Vue应用中使用router.go(-1)进行页面回退时，如何判断是否存在上一个路由，从而避免在首页或者初始路由时执行回退操作导致的异常。

摘要由CSDN通过智能技术生成

// 最佳实践（判断是否有上一级路由？有则回退：没有则跳转首页）
window.history.state.back ? router.go(-1) : router.push('/')

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

DW_DJF

关注关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

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

王佳斌

08-24

3406

Vue - 判断页面返回上一页时是否可返回，如不可返回则跳转到首页或其他页（路由 `$router.back(-1`) 回退时如何判断有没有上一个路由）vue返回上一页,判断当前页有无上一页，回退页面无效，回退页面如何判断能不能回去？回退页面怎么知道上一页是否可以返回过去？Vue路由back回退时如何判断有没有上一个路由，vue判断是否能返回上一页，vue中如何点击返回上一页，vue判断没有上页返回首页，vue返回上一页，判断当前页有无上一页，Vue路由的`$router.back(-1)` 回退时如何判断

vue中$router.go(-1) 跳转之前判断有没有上级路由

sdsccyy的专栏

01-14

3657

返回上级路由关闭当前页面

参与评论您还未登录，请先登录后发表或查看评论

vue-router判断是否存在上一个路由以及用户是否回到首页

最新发布

ddmt0000的博客

04-28

1050

可以设置一个全局前置守卫beforeEach，vue路由的起始路径就是/，可以判断to.path === '/'，但是这样还不够，因为用户也可以通过很多方式回到根目录（可能是首页），所以我们还需要判断是否存在上一跳，这里用

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

Seven_drunk的博客

04-02

1万+

每个页面的左上角有一个返回按钮< 点击时的代码是this.$router.back(-1)，返回上一个路由但是用户点开其中一页，用户打开时并没有上一条路由的历史记录，所以点击<按钮时没有反应。所以应该怎么判断有没有上一条路由的历史记录。 1.在页面一开始加上一个全局的函数： activated: function () { this.$setgoindex() ...

vue识别上一个路由页面

第一千行代码的博客

11-03

1502

//如果上一个路由是团长中心，则将activityStatus设置为null，默认查全部状态活动,tab选项卡也要设置为0的索引 beforeRouteEnter(to,from,next){ next(vm=>{ if(from.meta.title=="团长中心"){ sessionStorage.setItem('activityStatus',null) v...

Vue获取（返回）上一个路由

Minyoung 的博客

05-25

2万+

Vue获取上一个路由或者说返回到上一个路由可以用三种方法实现 1.使用钩子函数beforeRouteEnter beforeRouteEnter(to, from, next) {} 以及其他两个钩子函数请看：https://www.cnblogs.com/lhl66/p/9195901.html 关于路由守卫，每个路由是又独立守卫的：https://www.jianshu.com/p/...

Vue获取上个路由

Silence_Sep的博客

10-31

3525

使用钩子函数beforeRouteEnter beforeRouteEnter(to, from, next) { console.log('beforeRouteEnter第一个参数to',to); console.log('beforeRouteEnter第二个参数from',from); console.log('beforeRouteEnter第三个参数next'...

vue获取上一个路由地址

冷雨温喉的博客

08-19

7545

项目中我们会遇到需要根据上一个路由地址来改变组件内一些变量的情况，这时候就需要用到组件内的路由守卫beforeRouteEnter 注意，在路由进入之前，组件实例还未渲染，所以无法获取this实例，只能通过vm来访问组件实例，使用vm代替this访问data的数据 beforeRouteEnter(to, from, next) { next(vm=>{ if(from.path == '/download/data_downlaod'){ vm.in

使用router.go(-1)时，如何判断是否有历史记录

程序员超超的博客

04-10

995

但是有一个问题，如果这个页面没有上一级页面，也就是用户直接进入的这个页面，而不是从其他页面跳转进入的这个页面，点击按钮就会失效。如图所示，左边有一个按钮，作用就是返回上一级，我是用vue3，第一个想到的是使用。有历史就返回上一级，没有历史就返回首页。我第一个想到的解决方案是监听。最后的解决方案是使用。

vue获取上一个页面路由地址

热门推荐

铁锤妹妹的博客

05-03

2万+

项目需求是需要在当前页面获取上一个路由地址，并根据不同地址进行请求不同接口和页面样式调整的操作。记录一下：需要用到vue-router的beforeRouterEnter钩子其实也就是一个路由守卫 <script> export default { data() { return { fromPath: "", }; }, beforeRouteEnter (to, from, next) { next(vm => { cons

Vue路由back回退时判断有没有上一个路由

qq_44915607的博客

09-29

2753

onClickLeft () { if (window.history.length <= 1) { this.$router.push({ path: '/' }) return false } else { this.$router.go(-1) } // 上面都没执行就说明卡在当前页不是最后一条， histroy记录数量大于1，又没有回退记录，只能返回首页， // 如果上面都执行了页面都

vue路由跳转页面不刷新、this.$router.go(-1)不生效

黑玫瑰

07-12

8216

vue项目中遇见了这样一个问题：使用this.$router.go(-1)回到上一页，路由改变了，但是页面展示还是停留在当前页面，需要手动刷新才能渲染跳转后的页面。router-view 如下：一般情况用到上面这种写法就能解决问题了，但是我这里还是不生效。然后我就想到了如下方法：解决思路：在钩子时，使用存储from.path；然后在点击返回的时候使用this.$router.push代码：...

vue中 this.$router.go(-1) 失效，路由改变了，界面未刷新

xuelong的博客

12-25

2322

在vue项目中使用this.$router.go(-1)返回上一页时，发现有时候该功能是正常的，有时候，路由改变了，但页面依旧停留在当前界面。

Vue学习：组件内路由首位

weixin_47295886的博客

03-10

538

a 去 /b==>通过路由规则，进入/b前组件时被调用beforeRouteEnter。通过路由规则，/a离开该组件时被调用beforeRouteLeave--需要放行。/a-- 前置路由首位 ===》/b 后置路由首位。在组件内配置而不是路由规则上。

this.$router.go(-1)遇到的一些问题记录

凉茶冰

08-13

6941

目录前提条件需求描述问题描述 1 无法返回到列表 2 无法渲染的页面 3 无法关闭的新页签参考文献前提条件目前有这样一个需求，在列表中，点击列表的某个记录，会直接进入到A页面假设为：http://localhost:8080/#/index/123，在A页面内部有以下元素：（1）一个返回按钮，通过this.$router.go(-1)返回，或者是window.close()直接关闭页面。（2）一个a标签的连接，点击之后页面跳转到http://localho...

Vue笔记：Vue Router路由

七七的博客

09-26

770

vue-router路由说明学习的时候，尽量的打开官方的文档 Vue Router 是 Vue.js 官方的路由管理器。它和 Vue.js 的核心深度集成，让构建单页面应用变得易如反掌。包含的功能有：嵌套的路由/视图表模块化的、基于组件的路由配置路由参数、查询、通配符基于 Vue.js 过渡系统的视图过渡效果细粒度的导航控制带有自动激活的 CSS class 的链接 HTML5 历史模式或 hash 模式，在 IE9 中自动降级自定义的滚动条行为安装基于第一个vue-cli

vue中路由的前进和后退

weixin_48674314的博客

03-16

5313

this.$router.back() // 返回上一级 this.$router.go(-1) // 也是返回上一级 1就是前进 -1往后回退一级 -2 是往后回退二级 this.$router.push("aa") // 路由前进 aa是路由code 浏览器的刷新和回退 location.reload(参数) // true 是强制刷新相当于Ctrl+F5 false 刷新相当于F5 location.href = "" // 相当于浏览器地址栏的地址，也可以.

Vue-router小结

军火库

10-07

2216

Vue-router之前就是学过了，也是会基本的使用，但是感觉太久没有怎么用了不熟练了，有些细节也是忘记了。* 前几天用了，主要是用方法和,然后再router的index.js里面有些路由有些地方也是没有写好。只是能够简单地用，有些做法没有考虑清楚。今天有机会重新学习一下，就是要好好捡起之前的记忆。学习的知识如下:在浏览器中，点击链接实现导航的方式，叫做声明式导航。例如：普通网页中点击链接，vue 项目中点击都属于声明式导航* 在浏览器中，调用API方法实现导航的方式，叫做编程式导航。

vue3 页面组件中获取上一个页面的路由地址

lucky_zouzou的博客

04-20

1万+

那vue3中怎么获取上一个页面的路由地址...

vue-router回退

08-19

在Vue.js中，您可以使用Vue Router来进行路由的导航和管理。如果您想要在Vue Router中执行回退操作，有以下几种方法： 1. 使用`router.go()`方法： ```javascript // 回退到上一页 this.$router.go(-1); ``` 2. 使用`router.back()`方法： ```javascript // 回退到上一页 this.$router.back(); ``` 3. 使用`router.push()`方法指定目标路由： ```javascript // 回退到指定的路由 this.$router.push('/your-route'); ``` 请确保在组件中使用Vue Router时，通过`this.$router`来访问路由实例。这些方法将根据浏览器的历史记录进行导航，并且可以实现回退到上一页或指定的路由。如果您遇到了问题或需要更多帮助，请提供更多的代码或错误信息，以便我可以更具体地帮助您。