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

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

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

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