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

当我使用$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

url的操作之pushState、replaceState和popstate

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

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

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

    1.1K10

    浏览器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.5K21

    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视频无法播放问题?

    79930

    小程序页面事件与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

    45920

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

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

    87740

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

    使用 组件跳转到指定的 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) 方法,可以返回上一页面或多级页面

    49750

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

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

    11.5K20

    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按钮,可以从任意控制命令中退出,也可以从任意模式中退出(例如插入模式、查找模式)

    86310

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

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

    88820

    前端路由

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

    40810

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

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

    49310

    前端路由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中使用路由

    66820

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

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

    97680

    再谈location与history之跳转转态监控—router的两种实现模式

    浏览器的历史记录中就会生成一条新记录,用户通过单击"后退"按钮都会导航到前一个页面。...要禁用这种行为,可以使用location.replace(URL)方法结果虽然导致浏览器位置改变,但不会在历史记录中生成新记录。...就相当于一个链接,跳转到指定的url,当前页面会转为新页面内容,可以点击后退返回上一个页面。...location.replace(url) : 通过加载 URL 指定的文档来替换当前文档 ,这个方法是替换当前窗口页面,前后两个页面共用一个窗口,所以是没有后退返回上一页的location.reload.../zh-CN/docs/Web/API/History在history中跳转使用back(),forward(),go()方法来完成在用户历史记录中向后和向前跳转

    2.4K10

    Vue笔记(10) vue-router

    几个URL,然后用go实现跳转网页 现在往回go两个页面 本文由“壹伴编辑器”提供技术支持 认识vue-router 本文由“壹伴编辑器”提供技术支持 vue-router的使用 我是使用...router-link是默认将内容渲染成a标签的 假如我现在将它换一个位置 显示出来的就是这样的 下面是一点细节问题,就是当我们打开页面,应该自动打开首页,而不是需要我们手动选择...,比如之前都是渲染成, 但是其实可以渲染成其他类型的组件,比如按钮 App.vue replace: replace不会留下history记录,所以指定replace的情况下,后退键不能返回到上一个页面中...active-class可以修改默认的名称 在进行高亮显示的导航菜单或者tabbar,会使用到该类 但是通常不会修改类的属性,直接使用默认的router-link-active即可 它的需求可能是这种...样式也要跟着修改: 一个一个改可能太麻烦了,所以有一个简便的方法: 但是这个一般不修改的 通过代码跳转网页 现在我希望直接放按钮,通过点击跳转到对应的页面 本文由“壹伴编辑器”提供技术支持

    87410

    javascript基础修炼(6)——前端路由的基本原理

    在HTML4中,已经支持window.history对象来控制页面历史记录跳转,常用的方法包括: history.forward(); //在历史记录中前进一步 history.back(); //在历史记录中后退一步...history.go(n): //在历史记录中跳转n步骤,n=0为刷新本页,n=-1为后退一页。...window.onpopstate;//是一个事件,在点击浏览器后退按钮或js调用forward()、back()、go()触发。...将页面信息压入历史栈可以附带自定义的信息 参数传递能力 受到url总长度的限制, 将页面信息压入历史栈可以附带自定义的信息 实用性 可直接使用 通常服务端需要修改代码以配合实现 兼容性 IE8以上...$router = router; })(); 完成了路由插件的编写后,我们在demo中引入该库,然后使用when()方法注册几个路由地址,再使用init()方法启动路由,脚本部分代码如下: 效果:

    1.6K30
    领券