栏目分类:
子分类:
返回
名师互学网用户登录
快速导航关闭
当前搜索
当前分类
子分类
实用工具
热门搜索
名师互学网 > IT > 软件开发 > 后端开发 > Go语言

vue中使用history.go(-1)和history.back()两种返回上一页的区别

Go语言 更新时间: 发布时间: IT归档 最新发布 模块sitemap 名妆网 法律咨询 聚返吧 英语巴士网 伯小乐 网商动力

vue中使用history.go(-1)和history.back()两种返回上一页的区别

vue中使用history.go(-1)和history.back()两种返回上一页的区别

go(-1):原页面表单中的内容会丢失;

history.go(-1):后退+刷新;
history.go(1):前进;

back():原页面表单中的内容会保留;

history.back():后退
history.back(0):刷新
history.back(1):前进

使用路由进行页面前进时,路由会向 history 栈添加一个新的记录,所以,当用户点击$router.back()后退按钮时,则回到之前的 URL。

路由中设置:

{ path: '/shop', component: Shop ,
      children:
      [
        {path: 'goods', component: ShopGoods},
        {path: 'info', component: ShopGoods}
      ]
},

如果先在子路由中来回点击时,再按返回按钮,页面就会在之前点击的子路由中来回跳转,然后再回到上一级路由

原因:

因为在点击路由切换时,不管是子路由还是父路由,只要点击页面跳转了,路由都会向history 栈添加一个新的记录

思路:

想要解决这个问题就得在点击子路由的时候,在history 栈中不添加新的记录

解决方法

在子路由 router-link 中使用 replace ,就可以解决这个问题(直接回到上一级路由)
(因为replace不会向 history 添加新记录,也就是点击子路由时history 栈中不会添加新纪录)

 商品
 信息

所以点击返回就会回到上一级路由


转载请注明:文章转载自 www.mshxw.com
本文地址:https://www.mshxw.com/it/944039.html
我们一直用心在做
关于我们 文章归档 网站地图 联系我们

版权所有 (c)2021-2022 MSHXW.COM

ICP备案号:晋ICP备2021003244-6号