this.$router.go()和this.$router.push()的差别

最新推荐文章于 2025-10-09 19:08:26 发布

转载最新推荐文章于 2025-10-09 19:08:26 发布 · 2.1k 阅读

2 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/luyuefeng/p/8618944.html

文章标签：

#javascript #ViewUI

本文介绍了Vue.js中两种常用的路由操作方法：使用this.$router.go(val)实现页面前进或后退，及利用this.$router.push(path)添加新的历史记录。前者通过参数val控制前进或后退的步数，后者则直接跳转到指定路径。

1.this.$router.go(val) => 在history记录中前进或者后退val步，当val为0时刷新当前页面。

2.this.$router.push(path) => 在history栈中添加一条新的记录。

转载于:https://www.cnblogs.com/luyuefeng/p/8618944.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

diaobiteng1128

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue项目使用$router.go(-1)返回时刷新原来的界面操作

10-15

另一个方法是，不使用`$router.go(-1)`，而是调用`$router.push()`方法。这个方法可以强制进行页面跳转，从而让目标页面重新加载。但这种方法可能会引起其他问题，因为`$router.push()`可能会触发新的页面跳转行为，...

【vue-router源码】八、router.go、router.back、router.forward源码解析

MAXLZ的博客

06-10

4236

【vue-router源码】系列文章将带你从0开始了解vue-router的具体实现。本篇文章将介绍router。go、router.back、router.forward的实现。

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

关于this.$router.push、replace、go的用法和区别

热门推荐

聽風娓娓道來

10-10

4万+

this.$router.push 跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面 // 字符串 this.$router.push('index') // 对象 this.$router.push({path: 'login-pw'}) // 带参数 this.$router.push({path: 'login-pw', query: {'acc...

前后端知识总结3--Vue2 Class Component与this.$router.push

weixin_73803533的博客

08-31

422

vue-class-component 是一个用于 Vue.js 的类装饰器，它允许你使用 TypeScript 的类语法来定义 Vue 组件。这样做的好处是能够更好地利用 TypeScript 的类型检查和自动补全功能，同时使代码结构更加清晰。简单来说，vue-class-component 让你用面向对象的方式来写 Vue 组件，而不是传统的选项式 API。这样不仅增强了代码的可读性，还能更好地组织代码逻辑。在 Vue2 中，组件通常通过一个对象来定义，这种方式被称为选项式 API。

this.$router.go()和this.$router.push()的区别

马优晨

06-22

6146

this.router.go()和this.router.go()和this.$router.replace的差别 this.$router.go(val) 介绍：在history记录中前进或者后退val步， - 当val为-1时回到上一页。 - 当val为0时刷新当前页面。 - 当val为1到下一页。 this.$router.go(1) //类似history.forward() this.$router.go(-1) //类似history.back() this.$rout

vue路由跳转 this.$router.go()

从来不喝毒鸡汤

03-15

3万+

官方文档:https://cn.vuejs.org/v2/guide/migration-vue-router.html#%E7%BC%96%E7%A8%8B%E5%AF%BC%E8%88%AA 1、返回上一頁 <button @click="goback">返回上页</button> methods:{ goback(){ this.$router.go...

Vue成神之路（七）：VueRouter的router.push(),router.replace(),router.go()区别和this.$router传递参数与取值

小毛驴

06-18

3072

一：this.$router.push、replace、go的区别 1.router.push()方式向路由对象中添加新的路由路径（会在浏览器history中留下记录）声明式：编程式：router.push(…) 2.router.replace()方式向路由对象中添加新的路由路径(不会在浏览器history中留下记录) 声明式：编程式：router.replace(…) 3.router.go(-1)（相当于浏览器后退一步），router.go(3)（相当于浏览器前进三步）二：this.$rout

【Vue知识点总结】this.$router.push与this.$router.replace 跳转的区别

最新发布

这是个栗子的博客

10-09

122

特性核心行为向历史记录添加新记录替换当前历史记录浏览器后退可以返回到上一页不可以返回到被替换的页面使用场景绝大多数正常的页面跳转登录后、重定向、不希望返回的中间页声明式等效// 假设当前路由是 /home// 使用 push// 地址栏变为 /about// 历史记录: [ /home, /about ]// 点击后退 -> 回到 /home// 使用 replace// 地址栏变为 /contact。

【前端】解决 Vue 项目中this.$router.push跳转后页面未关闭问题的实现方案

m0_72165403的博客

08-14

1727

在 Vue 项目开发中，尤其是涉及多页面标签管理的场景，我们经常会遇到这样的问题：使用this.$router.push进行路由跳转后，当前页面的标签并未被自动关闭，导致标签页堆积，影响用户体验。本文将结合实际代码案例，详细讲解如何通过合理的逻辑设计，解决这一问题。

this.$router.push和this.$router.replace的区别

06-24

首先，用户的问题是关于Vue.js中this.$router.push和this.$router.replace的区别及使用场景。我需要基于提供的引用信息来回答。回顾系统级指令：-所有行内数学表达式必须使用$...$格式。-独立公式使用$$...$$格式。-...

Vue中给当前页面传递参数并重新加载，vue使用this.$router.push跳转页面，给跳转过去的页面传参不一致时重新加载

G佳伟

03-15

2051

使用 watch 监听 $route 对象的变化，当路由发生变化时重新加载数据或执行其他操作。利用路由参数来传递参数，并响应参数变化重新加载页面数据。下面是一个示例代码，演示了如何在Vue中给当前页面传参并重新加载：

this.router.go()和this.$router.push()

sunhy007的博客

07-21

476

this.$router.go(val) => 在history记录中前进(1)或者后退(-1)，当val为0时刷新当前页面。 val 为几就会退几步。一般是一步一步的退或进。 this.$router.push(path) => 在history栈中添加一条新的记录。 path 可以是字符串（地址）也可以是对象（路由配置对象跳转到响应的页面） ...

VUE中路由变化this.$router(push\replace\go\back)

qq_43631129的博客

08-09

4152

vue中路由变化:this.$router.push this.$router.replace this.$router.back this.$router.go

vue-router中push、replace、go的区别

qq_58152436的博客

05-20

2180

router.push('要跳转的路径')会向history栈中添加新的记录，当点击回退时，会回到之前的url，即回到根路径。router.replace（‘要跳转的路劲’）它的作用是替换当前的history记录。router.go(-1):后退和刷新。router.go(0):刷新。router.go(1):前进。

this.$router.push

weixin_37150764的博客

02-27

2180

路由传值 this.$router.push() （1）想要导航到不同的URL，使用router.push()方法，这个方法会向history栈添加一个新纪录，所以，当用户点击浏览器后退按钮时，会回到之前的URL （2）当点击时，这个方法会在内部调用，即点击等同于调用 router.push(…) 　　a)声明式：　　b)编程式：router.push(…) c)该方法的参数可以是一个字符串路径，或者一个描述地址的对象。 // 字符串 router.push(‘home’) // 对象 ro

vue 之this.$router.push、replace、go的区别

极客on之路

08-21

774

一、this.$router.push 说明：跳转到指定URL，向history栈添加一个新的记录，点击后退会返回至上一个页面使用： 1 2 3 4 this.$router.push('/index') this.$router.push({path:'/index'}) this.$router.push({path:'/index',query:{name:'123'}}) this.$router.push({n.

vue返回上一页效果(this.$router.go、)

xqhys的博客

04-16

2335

如何使用点击方式控制当前页返回到上一个路由页面：查阅相关资料，返回上一目录用到的是 this.$router.go(-1); 将该方法些到返回按钮上，点击触发该方法；具体代码如下: 1.在当前页面添加返回按钮  <div class="backTo" v-show="isShow"> <span v-on:click="...

编程式导航：router.go()方法怎样使用？

zy1992As的博客

02-20

987

router.go()方法的参数是一个整数，表示在history历史记录中前进或后退多少步，类似于window.history.go()。this.$router.go(-1)相当于history.back()，表示后退一步;this.$router.go(1)相当于history.forward()，表示前进一步，功能类似于浏览器上的后退和前进按钮，相应的地址栏也会发生改变。下面我们通过例5-9进行演示。(2)在浏览器中打开demo09.html，单击“后退”按钮，浏览器就会执行后退操作。

vue router.push()，router.replace()，router.go()，router.back()，router. forward()

LonewoIf的博客

05-30

8419

1、router.push()：导航到不同的 url，向 history 栈添加一个新的记录。（=== window.history.pushState）声明式编程式 <router-link :to=""> router.push() // 字符串 router.push('home') // 对象 router.push({ path: 'home' })...