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

最新推荐文章于 2024-08-13 17:30:01 发布

jr_csdn_jr

最新推荐文章于 2024-08-13 17:30:01 发布

阅读量1.5w

点赞数 5

分类专栏： vue.router

本文链接：https://blog.csdn.net/jr_csdn_jr/article/details/108171544

版权

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

摘要由CSDN通过智能技术生成

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

路由中设置：

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

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

jr_csdn_jr

关注关注

5
点赞
踩
10

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录

Vue - 判断页面返回上一页时是否可返回，如不可返回则跳转到首页或其他页（路由 $router.back(-1) 回退时如何判断有没有上一个路由）如果有历史记录则返回上一页，反之跳转到首页

王佳斌

08-24

3350

Vue - 判断页面返回上一页时是否可返回，如不可返回则跳转到首页或其他页（路由 `$router.back(-1`) 回退时如何判断有没有上一个路由）vue返回上一页,判断当前页有无上一页，回退页面无效，回退页面如何判断能不能回去？回退页面怎么知道上一页是否可以返回过去？Vue路由back回退时如何判断有没有上一个路由，vue判断是否能返回上一页，vue中如何点击返回上一页，vue判断没有上页返回首页，vue返回上一页，判断当前页有无上一页，Vue路由的`$router.back(-1)` 回退时如何判断

$router.back()返回上一级页面，保存的滚动位置出错的问题，bug记录。

weixin_42217982的博客

06-16

490

$router.back()返回上一级页面，保存的滚动位置出错的问题

参与评论您还未登录，请先登录后发表或查看评论

Vue 如何重写 Vue-Router 的 back 方法

最新发布

weixin_59685936的博客

08-13

914

Vue 如何重写 Vue-Router 方法

router返回

m0_58235310的博客

12-13

393

【代码】router返回。

JS $router.back()和$router.go()

Jana Jing的分享

10-26

1285

使用$router.back()和$router.go(-1)作用相同，都是返回原页面，但如果原页面路由携带参数，使用以上两个方式返回的原页面路由参数消失，此时使用$router.back(-1)返回原页面路由，参数仍存在。

$router.back()携带参数，复杂类型参数和简单类型参数

zwh2487577416的博客

03-25

1055

$router.back()携带参数，复杂类型参数和简单类型参数

Vue------this.$router.back()、this.$router.go()的异同

COCOLI_BK的博客

05-27

5212

返回上一个页面： 1.$router.back() 2.$router.go() 区别点在于： go(-1): 原页面表单中的内容会丢失； this.$router.go(-1)：后退+刷新； this.$router.go(0)：刷新； this.$router.go(1) ：前进 back(): 原页表表单中的内容会保留；在返回界面传递参数； this.$router.back():后退； this.$router.back(0) 刷新； this.$router.back(1)：前进

页面中通过创建一个 iframe 进行打印操作后，调用 $router.back() 会导致无法返回前一个路由的问题，怎么

06-01

这个问题可能是因为在打印时创建的 `iframe` 没有被...这里我们在 `iframe` 的 `onload` 事件中手动销毁了 `iframe`，然后再调用 `$router.back()` 方法返回前一个路由。这样可以避免因为内存泄漏导致的路由跳转问题。

使用了this.$router.replace,this.$router.go(-1)返回不了上一个页面

05-01

在使用this.$router.replace和this.$router.go(-1)时，实际上是更改了浏览器的历史记录，使得无法通过浏览器的返回按钮回到上一个页面。如果想要返回上一个页面可以使用this.$router.back()方法，这个方法可以直接...

详情页面中通过创建一个 iframe 进行打印操作，当我点击「返回」按钮调用 $router.back() 想要返回列表页时，会导致无法返回前一个路由的问题，怎么解决

06-01

你可以尝试在打印完成后手动销毁这个 `iframe`，然后再调用 `$router.back()` 方法返回前一个路由。例如： ``` const iframe = document.createElement('iframe'); iframe.style.display = 'none'; document.body....

vue中this.$router.back()、this.$router.go()的区别使用

weixin_45941064的博客

04-08

1万+

vue中this.$router.back()、this.$router.go()的区别使用

vue中$router.back()、$router.go()的区别使用

热门推荐

qq_37734787的博客

10-14

2万+

使用解析1 开发中遇到返回上一页的需求，有两个方法可选： 1.$router.back() 2.$router.go() 在使用中发现，使用router.back()和router.back()和router.back()和router.go(-1)作用相同，都是返回原页面。但如果原页面路由携带参数，使用以上两个方法返回的原页面路由参数消失，此时使用$router.back(-1)返回原页面路由参数仍存在。使用解析2 go(-1): 原页面表单中的内容会丢失； this.$router.go(-1)：后退

vue router返回上一级

weixin_58018769的博客

08-11

6978

router.push()方法可以用来跳转到指定的页面，其中可以传入一个字符串参数，表示页面跳转的路径，如果传入'back'，表示返回上一页。window.history.go()方法可以用来跳转到指定的页面，其中可以传入一个参数，表示页面跳转的层级，如果传入-1，表示返回上一页。router.go()方法可以用来跳转到指定的页面，其中可以传入一个参数，表示页面跳转的层级，如果传入-1，表示返回上一页。5.使用window.history.back()方法。2.使用router.back()方法。

$router.back(-1)

weixin_43258184的博客

02-07

540

$router.back(-1)，跳到上一个网址路由。 <el-button type="text" icon="el-icon-arrow-left" style="font-size:22px" @click="$router.back(-1)">返回</el-button>

this.$route.back()时的组件缓存

qq_61990666的博客

03-31

676

2.keep-alive写在router-view上面,这个地方所代表的路由会被保存,因此可以写在上面,保存,当返回时,如果是这个路由,里面的内容是一样的,如果里面还有内容,则会缓存路由的页面的所有内容.在:include=写的是以及组件的name名,如果没有就是vue的文件名,会缓存内部的二级路由的内容,当时这个路径,符合二级路由的路径时才会渲染.一个组件名,可以缓存多个页面.看路径来决定.跳转时,前一个路由的内容会被销毁,当回来时,重新创建树,组件内有保存了距离,没有一开始是0.

vue中$router.back()和$router.go()

qq_43638735的博客

04-10

8668

返回上一页，有两种方法： 1. $router.back() 2. $router.go() 使用$router.back()和$router.go(-1)作用相同，都是返回原页面，但如果原页面路由携带参数，使用以上两个方式返回的原页面路由参数消失，此时使用$router.back(-1)返回原页面路由，参数仍存在。 go(-1):原页面表单中的内容会丢失； this.$router.go(-1):后退+刷新； this.$router.go(0):刷新； this.$router.go(1):前

this.$router.back()和this.$router.go()区别

coderMrcc的博客

05-22

229

【代码】this.$router.back()和this.$router.go()区别。