使用$router.back()进行页面返回时，先在子路由跳转完后再回到上一级路由

最新推荐文章于 2025-04-06 10:44:34 发布

jr_csdn_jr

最新推荐文章于 2025-04-06 10:44:34 发布

阅读量1.5w

点赞数 5

分类专栏： vue.router

本文链接：https://blog.youkuaiyun.com/jr_csdn_jr/article/details/108171544

版权

vue.router 专栏收录该内容

1 篇文章

订阅专栏

在 Vue 路由中，$router.back()操作会在历史记录中回退。若先在子路由中切换，再使用$router.back()，会出现子路由来回跳转的现象。为避免此问题，可在子路由的router-link中使用replace属性，它不会在history栈中新增记录，确保点击返回直接回到上一级路由。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用路由进行页面前进时，路由会向 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>