首页
学习
活动
专区
圈层
工具
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

当我使用$router.push.()跳转其他页面时,后退按钮会跳转到最后一页

当使用$router.push()跳转到其他页面时,后退按钮会跳转到最后一页的原因是因为$router.push()方法会将新的页面添加到浏览器的历史记录中,而后退按钮会按照历史记录进行导航。所以当你连续多次使用$router.push()方法跳转页面时,后退按钮会按照历史记录逐步回退,直到回退到最后一页。

为了解决这个问题,你可以使用$router.replace()方法来代替$router.push()方法进行页面跳转。$router.replace()方法会替换当前页面的历史记录,而不是添加新的历史记录。这样后退按钮就不会跳转到最后一页了。

另外,如果你想要在跳转页面后禁用后退按钮,你可以使用window.history.replaceState()方法来修改浏览器的历史记录,将新的页面替换为当前页面。这样后退按钮就会失效,无法回退到之前的页面。

总结起来,当使用$router.push()方法跳转到其他页面时,后退按钮会跳转到最后一页是因为新的页面被添加到了浏览器的历史记录中。为了解决这个问题,可以使用$router.replace()方法进行页面跳转,或者使用window.history.replaceState()方法禁用后退按钮。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

ajax无刷新页面切换,历史记录后退前进解决方案

一般需求要历史返回的时候,我们通常不使用ajax。但是呢,假如一个页面中,只有一个地方是需要动态的上一页下一页,其他地方都是固定的,那么这种情况除了使用模板之外,我们使用ajax来操作显得格外方便!...window.onpopstate history.go和history.back(包括用户按浏览器历史前进后退按钮)触发,并且页面无刷的时候(由于使用pushState修改了history)会触发popstate...事件,事件发生时浏览器会从history中取出URL和对应的state对象替换当前的URL和history.state。...而当有浏览者点击浏览器“后退”或“前进”按钮时,我们用下面的代码来响应用户的操作: window.onpopstate = function(event){ if(event.state){...其他场景的应用 历史记录操作方法应用很广泛,我们在SPA页面中广发应用。

1.4K30

零基础微信小程序开发——页面导航之声明式导航(保姆级教程+超详细)

当使用声明式导航(即通过在WXML中使用组件)来导航到tabBar页面时,需要注意以下几点: tabBar页面配置: 首先,确保目标页面(即要导航到的页面)已经被配置为tabBar...组件属性: 在使用组件时,需要设置url属性和open-type属性来指定跳转的目标页面和跳转方式。...当使用声明式导航(即通过组件)来跳转到这些非tabBar页面时,需要注意以下几点: 指定url属性: url属性用于指定要跳转的页面的地址。...delta=“2”:表示返回的页面数量为2,即点击这个按钮后,会返回到当前页面的前两页。 返回前两页:这是按钮上显示的文本,告诉用户点击这个按钮可以返回前两页。...由于没有指定delta属性,所以默认返回上一页(即delta默认为1)。 返回上一页:这是按钮上显示的文本,告诉用户点击这个按钮可以返回上一页。

17910
  • url的操作之pushState、replaceState和popstate

    上一节我们说地址栏跳转的时候,谈到了浏览器会缓存用户访问url序列,我们可以通过浏览器的前进后退按钮或者通过js提供的方法,访问这个序列里的url,不过关于这一点上一节我们只说了window.history.go...window.history.back() 这个方法的作用为返回上一页,相当于浏览器的后退按钮,和window.history.go(-1)达成的效果是一样的。...前面我们说了,history会缓存一个用户访问的url序列,跳转页面时候,就会往这个序列里添加一个新的url,其实这个方法的作用也是添加一个url,并展示在状态栏,只不过不是立即跳转的,当你使用它的时候...,它只会将目标url添加到序列中,并且出现在地址栏中,但并不会立即加载并跳转到这个页面,但如果你访问了新的页面,点击返回按钮的时候,或者在当前页面刷新时,浏览器就会加载并跳转到你新添加的这个url。...利用此特性,我们可以动态的修改地址栏的参数,以便在用户下次刷新时候发生不一样的效果,比如我们从其他页面跳转到此页面时会携带一个标识性的参数,我们用完这个参数后可以删除这个参数,以便显示此页面的默认显示内容

    2.9K20

    :第十四章 - 编程式导航与实现组件与 Vue Router 之间的解耦

    就像我们很常见的一个交互需求,用户提交表单,提交成功后跳转到上一页面,提交失败则留在当前页。...1.1、push   当我们需要跳转新页面时,我们就可以通过 push 方法将一条新的路由记录添加到浏览器的 history 栈中,通过 history 的自身特性,从而驱使浏览器进行页面的跳转。...同时,因为在 history 会话历史中会一直保留着这个路由信息,所以当我们后退时还是可以退回到当前的页面。   ...$router.push({ path: '/user', params: { userId }})   1.2、go   当我们使用 go 方法时,我们就可以在 history 记录中向前或者后退多少步...方法时,并不会往 history 栈中新增一条新的记录,而是会替换掉当前的记录,因此,你无法通过后退按钮再回到被替换前的页面。

    1.1K10

    零基础微信小程序开发——页面导航之编程式导航(保姆级教程+超详细)

    }) } }) 演示一下结果: 点击index.wxml页面的按钮,就可以直接跳转到message.wxml页面 后退导航 调用 wx.navigateBack(Object object)...方法,可以返回上一页面或多级页面。...首先我们先使用非tabBar页面的跳转,进行两个页面的跳转,通过index页面跳转到individual页面然后再跳转到message页面,然后在message页面配置两个按钮,一个按钮是返回上一页,.../message', }) } }) 在message.wxml文件中定义两个按钮,一个是返回上一页,一个是返回上上一页 message.wxml文件: 公众号:小白的大数据之旅...Page({ back_1(){ // 默认后退上一页 wx.navigateBack() }, back_2(){ wx.navigateBack(

    12710

    浏览器history模式及Umi history的使用

    它提供了丰富的函数供开发者调用: push :向 history 栈里添加一条新记录,用户点击浏览器的回退按钮可以回到之前的路径; go:在 history 记录中向前或者后退多少步,参数是一个整数,可为正数可为负数...; goBack:返回上一页; forward():前进; replace:替换当前的 history 记录,跳转到指定的 url,不会向 history 添加新的记录,点击返回,会跳转到上一个页面,上一个记录是不存在的...; 常用示例: location.reload() 刷新 history.go(1) 前进 history.go(-1) 后退 history.forward() 前进 history.back() 后退...+ 刷新 扩展: history.back 与 history.go 的区别: history.back(-1) 直接返回当前页的上一页,数据全部消息,是个新页面 history.go(-1) 也是返回当前页的上一页...action) => {   console.log(location.pathname) }) unlisten() 未经允许不得转载:w3h5 » 浏览器history模式及Umi history的使用

    8.7K21

    『Dva』路由跳转

    好了,看了如何跳转之后,它其实不仅仅可以进行跳转它还可以做一些其他事情。...,怎么前进后退,是不是传正数负数,这类似的就可以了,是不是可以通过 goBack 回到上一页,是不是可以通过 goForward 去到下一页,这类似的也可以了。...那么我怎么再进一步的验证我的说法呢,我就通过演示一下 goBack 来验证一下,通过 goBack 来验证呢也非常的简单,首先来到 About 组件中,在 About 中添加一个按钮,按钮显示内容就是返回上一页...三、总结 通过本文的学习,您可以掌握以下知识点: 1.Dva 路由跳转的基本方式:通过 Link 标签实现页面跳转。通过代码派发任务的方式使用 routerRedux 实现页面跳转。...2.代码跳转的多种实现:使用 routerRedux.push() 实现前往指定页面的跳转。结合其他方法如 go()、goBack()、goForward() 实现页面的前进、后退和替换等操作。

    6710

    Hybrid App

    这样返回键会返回上一个路由,而this.$router.replace不会在history中保留。 2、子页面返回改写 以聊天界面为例: 1、消息列表页面 每条消息的点击事件使用this....$router.push(),点击进入详情页,这样保证histroy中记录着主页面的地址。 2、详情页面 左上角有个返回按钮,这个返回按钮的跳转事件千万不能用this....$router来跳转,否则会出现返回错乱。 而是使用this.router.back()或者this.router.go(-1),这样既能成功返回上一页,也会清除掉上一条history记录。...) 2 : TYPE_BACK_FORWARD (用户通过后退按钮访问本页面) window.addEventListener('pageshow', function (event) { if...跳转外链 window.location.href = url 跳转,回退会直接退出应用;使用应用api方法打开新的页面,才可回退到上一个页面 8. h5 ios视频无法播放问题?

    80430

    小程序页面事件与wxs脚本

    在使用 组件跳转到指定的 tabBar 页面时,需要指定 url 属性和 open-type 属性,其中: url 表示要跳转的页面的地址,必须以 / 开头 open-type 表示跳转的方式,必须为...在使用 组件跳转到普通的非 tabBar 页面时,则需要指定 url 属性和 open-type 属性,基本同上,open-type 必须为 navigate。...3.后退导航 如果要后退到上一页面或多级页面,则需要指定 open-type 属性和 delta 属性,其中: open-type 的值必须是 navigateBack,表示要进行后退导航 delta...name=zs&age=20">跳转到info页面 编程式导航传参 调用 wx.navigateTo(Object object) 方法跳转页面时,也可以携带参数。...案例 - 本地生活 页面导航并传参 上拉触底时加载下一页数据 下拉刷新列表数据 列表页面的 API 接口 以分页的形式,加载指定分类下商铺列表的数据: 接口地址 https://www.escook.cn

    47820

    在微信小程序上做一个「博客园年度总结」:小程序部分交互效果实现

    函数,后面会详细说下这个函数的作用 2、控制底部icon的变化 在滑动到最后一页前,底部的icon为"向上的箭头", 滑动到最后一页时,底部变为【生成我的年度封面】按钮 要实现这个功能,我们需要知道当前是否滑动到了最后一个...会触发这个事件,然后index值会随之更新, 这样在前端用if条件控制一下 ,就可以显示不同的内容了 比如一共有6张轮播图,如果index5,就显示按钮 到最后一个时,不显示上滑箭头 --> 生成我的年度封面 3、点击按钮跳转至「...年度封面」 这个比较简单,在page中新建一个页面,然后使用导航过去即可 按钮有一个 open-type 属性, 当open-type="share"时,可以点击按钮进行小程序分享 <button type="default" open-type=

    90240

    【小程序】声明式和编程式导航传参

    在使用 组件跳转到指定的 tabBar 页面 时,需要指定 url 属性和 open-type 属性,其中: url 表示要跳转的页面的地址,必须以 / 开头 open-type...在使用 组件跳转到普通的非 tabBar 页面时,则需要指定 url 属性和 open-type 属性,其中: url 表示要跳转的页面的地址,必 须以 / 开头 open-type...后退导航 如果要后退到上一页面或多级页面,则需要指定 open-type 属性和 delta 属性,其中:  open-type 的值必须是 navigateBack,表示要进行后退导航  delta...的值必须是数字,表示要后退的层级 示例 代码如下:  注意:为了简便,如果只是后退到上一页面,则可以省略 delta 属性,因为其默认值就是 1。...后退导航 调用 wx.navigateBack(Object object) 方法,可以返回上一页面或多级页面。

    50050

    JSP 防止网页刷新重复提交数据

    后来,看到竟然有那么多的人想要禁用这个后退按钮,我也就释然(想要禁用的只有后退按钮,不包括浏览器的前进按钮)。因为在默认情况下,用户提交表单之后可以通过后退按钮返回表单页面(而不是使用“编辑”按钮!)...它强制浏览器重新访问服务器下载页面,而不是从缓存读取页面。使用这种方法时,编程者的主要任务是创建一个会话级的变量,通过这个变量确定用户是否仍旧可以查看那个不适合通过后退按钮访问的页面。...不过我注意到,如果使用这种方法,虽然用户点击一下后退按钮时他不会看到以前输入数据的页面,但只要点击两次就可以,这可不是我们希望的效果,因为很多时候,固执的用户总是能够找到绕过预防措施的办法。     ...另外一种禁用后退按钮的办法是用客户端JavaScript打开一个没有工具条的窗口,这使得用户很难返回前一页面,但不是不可能。...经过一番仔细的寻寻觅觅之后,我发现仍旧无法找出真正能够完全禁用浏览器后退按钮的办法。所有这里介绍的方法都能够在不同程度上、以不同的方式禁止用户返回前一页面,但它们都有各自的局限。

    11.6K20

    React路由

    为了有效的使用单个页面来管理原来多页面的功能,前端路由应运而生。...前端路由的功能:让用户从一个视图(页面)导航到另一个视图(页面) 前端路由是一套映射规则,在React中,是 URL路径 与 组件 的对应关系 使用React路由简单来说,就是配置 路径和组件(配对)...编程式导航:通过 JS 代码来实现页面跳转 history 是 React 路由提供的,用于获取浏览器历史记录的相关信息 push(path):跳转到某个页面,参数 path 表示要跳转的路径 go(n...): 前进或后退到某个页面,参数 n 表示前进或后退页面数量(比如:-1 表示后退到上一页) class Login extends Component { handleLogin = () =...this.props.history.push('/home') } render() {...省略其他代码} } 动态路由与路由参数获取 可以使用:id的方式来配置动态的路由参数 //

    2K20

    大前端开发中的路由管理之二:web篇

    会重新执行,当前页面的内容便会丢失;页面跳转时浏览器不会向服务器发出新的页面请求,浏览器也就无法前进、后退页面。         ...about">about detail         当点击页面上的按钮时...在H5之前其实存在history接口了,但只是用于页面的跳转,比如: history.go(-1); // 后退一页history.go(2); // 前进两页history.forward...(); // 前进一页history.back(); // 后退一页         在H5规范中引入了三个新的API, // 按指定的名称和URL(如果提供该参数)将数据...id="push_btn">         最后提一点,由于history是通过改变URL来进行路由的,当刷新页面时浏览器会向服务器访问当前地址

    1.6K20

    Chrome 浏览器最牛插件之一 Vimium

    其中我使用到的都进行了中文翻译,一些没有翻译的是我没有使用的,这部分理解不深,不想误导大家,所以将英文原文放在这里,还望大神指点。...---- 查找: / 进入查找模式,输入关键字查找,ESC退出 n 切换到下一个匹配 N 切换到上一个匹配 ---- 前进后退: H 后退 L...前进 ---- 切换tab: J, gT 切换到左边tab K, gt 切换到右边tab g0 切换到第一个tab g$ 切换到最后一个tab ^ 切换到刚才的tab...unpin current tab ---- 标记: ma 当页标记,只能在当前tab页面跳转,m + 一个小写字母 mA 全局标记,可以再切换到其他tab的跳转过来,m + 一个大写字母...数字num + t,打开num个tab页面 ESC按钮,可以从任意控制命令中退出,也可以从任意模式中退出(例如插入模式、查找模式)

    88210

    【插件】解放鼠标,让浏览器更智能

    Surfingkeys和现有的一些插件一样,让你尽可能的通过键盘来使用Chrome/Firefox浏览器,比如跳转网页,上下左右滚屏。...url编辑 su vim中编辑当前url gu 到url上层目录 S 后退(在标签页历史中) D 前进(在标签页历史中) r 页面重载 g?...af 选取链接在新标签页中打开,切换为当前标签 i 选择文本框并编辑 I 选择文本框并用vim编辑() q 选取点击图片或按钮...[[ 点击上一页 ]] 点击下一页 利用 ]] 和 [[ 翻页: ?...同时我们组建了一个技术交流群,里面有很多大佬,会不定时分享技术文章,如果你想来一起学习提高,可以公众号后台回复【2】,免费邀请加技术交流群互相学习提高,会不定期分享编程IT相关资源。

    89520

    前端路由

    改变#后面的内容不会引起页面重新刷新,但是会有历史记录,所以可以后退。这对于ajax应用程序特别有用,可以用不同的#值,表示不同的访问状态,然后向用户给出可以访问某个状态的链接。...对于a标签,平时有一个常规的操作: 想要在某个点击按钮变成a标签的那个cursor:pointer(手指),一般就用a标签包住文字, 按钮但是这样子是会有历史记录,所以我们应该改成...按钮 我们在用vue路由的时候,其实可以发现,router-link到最后就是一个a标签。...而我们也知道a标签有一个href属性,如果是哈希路由就不会引发页面的刷新。所以平时也有一种常规操作,返回顶部,就是a标签的href=“#”,就是直接跳转到页面顶部。...如果我们给dom一个id,#就跳转到那个dom的位置。 对于前端路由,我们有一个事件可以利用的,onhashchange,监听哈希的变化然后执行相应的回调函数。

    40910

    浏览器中的JavaScript核心BOM(浏览器对象模型)

    正文 因为把浏览器的所有内置对象逐个详细讲解,文章篇幅会很长,所以我把每个对象的讲解都放在不同的文章中,大家如果还想了解其他的浏览器内置对象,可以划到文章最后一部分,那里有跳转链接。...该动图展示的是页面1跳转到页面2,页面2跳转到页面3,然后可以通过浏览器的后退和前进按钮在这三个页面之间切换。...接下来我们来看一下它的实现原理,因为有些小伙伴可能不知道栈结构,这里我就拿两个没有盖子的杯子来举例,第一个杯子最上面的绿色块儿代表当前所在的页面 首先我们浏览器未做任何跳转页面操作时,这第一个杯子中有一个页面...现在我们使用浏览器的后退功能,也就是返回上一个页面,此时将页面3放到第二个杯子中,这时页面2就变成了第一个杯子中最上面的绿块儿了,所以此时处于页面2 ?...相当于我们原本只有第一个杯子里有一个页面1,所以绿块儿总个数为1,所以length为1;当我们跳转到页面2时,往第一个杯子中加入了一个页面2,所以绿块儿总个数为2,所以length为2;当我们执行后退功能时

    50810

    如何在UWP中统一处理不同设备间的页面回退逻辑

    当我们的UWP应用程序运行在不同的设备上时,不同设备间的页面回退逻辑我们就要考虑周全,要考虑不同设备间的页面回退操作该如何设计才能更好的满足用户的使用需求。...为了方便,楼主这里只简单论述一下当我们的UWP应用程序运行在PC上和Mobile上时该如何处理不同平台的页面回退逻辑。...当应用程序运行在PC上时,页面回退常常是通过用户点击应用程序提供的一个回退按钮来进行页面回退,但是当我们的应用程序运行在Mobile上时,用户更愿意使用手机设备上提供的物理后退键来进行页面回退,这样一来...但是当我们的UWP应用程序运行在Mobile上时,如果还是用这种方法来进行页面回退的的话,对用户来说就可能不是很友好,因此,我们要投其说好,用手机设备上的物理后退键来实现相应的页面回退逻辑,其对应的API...由于应用程序刚启动的时候会触发App.OnLaunched()函数,所以我们需要修改OnLaunched()函数;其次,为了保证页面的唯一性,我们这里使用“框架页”的方法来承载不同的页面,通过Frame

    98080

    前端路由0.前言1.哈希路由2.history路由

    改变#后面的内容不会引起页面重新刷新,但是会有历史记录,所以可以后退。这对于ajax应用程序特别有用,可以用不同的#值,表示不同的访问状态,然后向用户给出可以访问某个状态的链接。...对于a标签,平时有一个常规的操作: 想要在某个点击按钮变成a标签的那个cursor:pointer(手指),一般就用a标签包住文字, 按钮但是这样子是会有历史记录,所以我们应该改成...按钮 我们在用vue路由的时候,其实可以发现,router-link到最后就是一个a标签。...而我们也知道a标签有一个href属性,如果是哈希路由就不会引发页面的刷新。所以平时也有一种常规操作,返回顶部,就是a标签的href=“#”,就是直接跳转到页面顶部。...'#' + this.next } } const r = new Router() 复制代码 我们尝试点击一下a标签,发现url上面的#后面 内容改变,而且控制台打印了相应的数字 在VUE中使用路由

    67020
    领券