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 栈中不会添加新纪录)

 <router-link to="/shop/goods" replace>商品</router-link>
 <router-link to="/shop/info" replace>信息</router-link>

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

<a @click="$router.back()"></a>
Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐