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

已于 2023-05-22 16:38:58 修改
阅读量212 收藏
点赞数
分类专栏： vue 文章标签： 前端 javascript
于 2023-05-22 16:37:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/coderMrcc/article/details/130810224
版权
在Vue应用中，使用`this.$router.go`和`this.$router.back`对页面进行导航时，会影响表单内容。`go(-1)`后退会导致表单内容丢失，而`back()`则能保留内容。通过调整参数，可以实现刷新页面或前进到其他页面的操作。
摘要由CSDN通过智能技术生成 
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)   前进

coderMrcc
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
$router.back()返回上一级页面，保存的滚动位置出错的问题，bug记录。
weixin_42217982的博客
06-16 447
$router.back()返回上一级页面，保存的滚动位置出错的问题
使用$router.back()进行页面返回时，先在子路由跳转完后再回到上一级路由
jr_csdn_jr的博客
08-22 1万+
使用路由进行页面前进时，路由会向 history 栈添加一个新的记录，所以，当用户点击$router.back()后退按钮时，则回到之前的 URL。 路由中设置： { path: '/shop', component: Shop , children: [ {path: 'goods', component: ShopGoods}， {path: 'info', component: ShopGoods} ] }, 如果先在子路由中来回点
vue中this.$router.back()、this.$router.go()的区别使用
weixin_45941064的博客
04-08 1万+
vue中this.$router.back()、this.$router.go()的区别使用
this.$router.go和this.$router.back区别
qq_46738283的博客
09-27 640
【代码】this.$router.go和this.$router.back区别。
router返回
m0_58235310的博客
12-13 318
【代码】router返回。
vue项目使用$router.go(-1)返回时刷新原来的界面操作
11-20
在项目需求中，我们常常需要使用$router.go(-1)返回之前的页面，但是却发现，之前的界面，保持着上次跳转的状态，比如说：弹框未关闭之类的等等，。。。。。 问题如下： 界面1 ： 界面2使用$router.go(-1)返回上一...
浅谈Vue.js路由管理器 Vue Router
10-18
Vue.js路由管理器Vue Router是Vue.js官方的路由管理器，它和Vue.js深度集成，用于构建单页面应用程序。Vue Router允许你通过定义不同的路由来匹配不同的URL，当用户访问不同的路由时，可以在一个应用内渲染不同的...
vue-router案例.zip
01-25
除了 HTML 中的 `<router-link>`，Vue Router 还提供了编程式导航的方法，如 `this.$router.push`、`this.$router.replace`、`this.$router.go` 和 `this.$router.back`，使你可以在组件中动态改变导航。...
Vue.js中该如何自己维护路由跳转记录
10-16
这样，每次调用`this.$router.goBack()`时，都会更新`isBack`标志，并调用`back`方法，从而从自定义的历史记录堆栈中进行回退。 在路由的全局`afterEach`钩子中，我们需要记录每次路由变化。如果`isBack`标志为真，...
vue.js实现刷新当前页面的方法教程
12-10
this.$router.push('/user/back'); } } ``` **三、编写空页面** 空页面的主要任务是在加载后立即返回原页面。在空页面的组件中，我们可以在`created`或`mounted`生命周期钩子中执行反向导航。如下所示： ```...
this.$route.back()时的组件缓存
最新发布
qq_61990666的博客
03-31 614
2.keep-alive写在router-view上面,这个地方所代表的路由会被保存,因此可以写在上面,保存,当返回时,如果是这个路由,里面的内容是一样的,如果里面还有内容,则会缓存路由的页面的所有内容.在:include=写的是以及组件的name名,如果没有就是vue的文件名,会缓存内部的二级路由的内容,当时这个路径,符合二级路由的路径时才会渲染.一个组件名,可以缓存多个页面.看路径来决定.跳转时,前一个路由的内容会被销毁,当回来时,重新创建树,组件内有保存了距离,没有一开始是0.
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中this.$router.back()与this.$router.go(-1)返回上一页的区别
m0_67402341的博客
03-09 1582
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)：前进 ...
vue 之返回上一页按钮 $router.back(-1) 刷新当前页：this.$router.go(0);
夜阑珊妖妖
11-20 6969
vue 之返回上一页按钮 <img src="@/assets/img/nav-prve.png" alt="" class="navprve" @click="$router.back(-1)" />   其他文章：https://www.cnblogs.com/cheng...
router返回时携带参数
热门推荐
uniquemei的博客
12-21 2万+
vue项目中如何在router.back()的时候携带参数呢，又如何在界面中获取返回的参数呢？废话不多说，直接上代码。 1、在返回界面传递参数 this.$route.params.user = "123"; this.$router.back(); 2、在返回到的上一个界面接收参数 let previousRouterName = ""; let selectUser = ""; beforeRouteEnter(to, from, next) { previousRouterName
$router.back()携带参数，复杂类型参数和简单类型参数
zwh2487577416的博客
03-25 868
$router.back()携带参数，复杂类型参数和简单类型参数
JS $router.back()和$router.go()
Jana Jing的分享
10-26 1146
使用$router.back()和$router.go(-1)作用相同，都是返回原页面，但如果原页面路由携带参数，使用以上两个方式返回的原页面路由参数消失，此时使用$router.back(-1)返回原页面路由，参数仍存在。
CRM项目前端使用路由的$router.back()方法和Keep-Alive保持路由的生命状态保证页面跳转时不会丢失网页效果------CRM项目
春风若有怜花意，可否许我再少年
02-10 829
CRM项目前端使用路由的$router.back()方法和Keep-Alive保持路由的生命状态保证页面跳转时不会丢失网页效果------CRM项目
vue中$router.back()和$router.go()
qq_43638735的博客
04-10 8628
返回上一页，有两种方法： 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(-1)的区别使用
06-08
`this.$router.back()` 和 `this.$router.go(-1)` 都可以返回上一个页面，但是它们的使用场景稍有不同。 `this.$router.back()` 是 Vue Router 提供的方法，用于返回上一个访问的页面。它会返回到浏览器的历史记录中最近的一个页面。如果当前页面是从其他页面跳转过来的，那么返回的就是上一个页面。如果当前页面是用户手动输入 URL 进入的，那么返回的就是浏览器中的上一个历史记录。 而 `this.$router.go(-1)` 则是通过跳转到指定的页面来实现返回上一个页面的效果。`go()` 方法接收一个整数参数，该参数表示要前进或后退的步数。如果参数为正数，表示前进；如果参数为负数，表示后退。而 `-1` 表示后退一步，即返回上一个页面。 综上所述，如果你想要返回上一个页面，可以使用 `this.$router.back()`，但如果你需要返回上上个页面或者更多步，就应该使用 `this.$router.go(-n)`。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值