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

最新推荐文章于 2025-08-14 21:30:04 发布
原创 最新推荐文章于 2025-08-14 21:30:04 发布 · 298 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#this.$router.push、replace、go的区别

本文详细介绍了Vue.js中使用this.$router.push和this.$router.replace进行页面跳转的方法，包括字符串、对象及带参数的跳转方式，以及如何在目标页面获取传递的参数。

this.$router.push
跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面

// 字符串
this.$router.push(‘index’)

// 对象
this.$router.push({path: ‘login-pw’})

// 带参数
this.$router.push({path: ‘login-pw’, query: {‘account’: this.account.account}})

// 跳转后的页面获取参数
this.account.account = this.$route.query.account

this.$router.replace
跳转到指定url路径，但是history栈中不会有记录，点击返回会跳转到上上个页面

this.$router.go(n)
向前或者向后跳转n个页面，n可为正整数或负整数

红孩儿2011
关注
【Vue知识点总结】this.$router.push与this.$router.replace 跳转的区别
这是个栗子的博客
10-09 161
特性核心行为向历史记录 添加 新记录替换 当前历史记录浏览器后退可以 返回到上一页不可以 返回到被替换的页面使用场景绝大多数正常的页面跳转登录后、重定向、不希望返回的中间页声明式等效// 假设当前路由是 /home// 使用 push// 地址栏变为 /about// 历史记录: [ /home, /about ]// 点击后退 -> 回到 /home// 使用 replace// 地址栏变为 /contact。
Vue路由守卫
KongYue1202的博客
10-20 1076
Vue路由守卫 全局守卫代码： main.js页面： to是要去的页面，from是要离开的，next是个函数，否则就展示哪个页面 const auth = { isLogin () { return false } } // 全局守卫 router.beforeEach((to, from, next) => { // console.log(to) if (to.path === '/more') { console.log('盘查') if (au
关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题
10-15
主要介绍了关于vue3.0中的this.$router.replace({ path: '/'})刷新无效果问题，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
Vue-Router常用、好用的知识点整理
小白的博客
04-09 710
本文介绍了Vue配合使用Vue-router时常用的方法以及知识点 ，主要为history模式、路由激活状态（路由激活时对应点击态等触发态的配置）、router-link的prop属性、根据路由滚动到页面指定位置 1、当你在 HTML5 history 模式下使用base选项之后，所有的to属性都不需要写 (基路径) 了。 eg：如下点击后访问的链接为 /bar/foo n...
this.$router.push用法
weixin_35755823的博客
12-20 935
this.$router.push 是 Vue.js 中用于编程式导航的方法，可以用来在当前 Vue 应用中导航到其他路由。 它接受一个参数，可以是一个字符串或者一个对象，其中字符串表示要导航到的路由的路径，对象表示一个路由配置对象，可以包含要导航到的路径、路由参数等信息。 例如，如果想要导航到一个名为 users 的路由，可以使用如下代码： this.$router.push('/users')...
【前端】解决 Vue 项目中this.$router.push跳转后页面未关闭问题的实现方案
m0_72165403的博客
08-14 1800
在 Vue 项目开发中，尤其是涉及多页面标签管理的场景，我们经常会遇到这样的问题：使用this.$router.push进行路由跳转后，当前页面的标签并未被自动关闭，导致标签页堆积，影响用户体验。本文将结合实际代码案例，详细讲解如何通过合理的逻辑设计，解决这一问题。
this.$router.push和this.$router.replace的区别
06-24
首先，用户的问题是关于Vue.js中this.$router.push和this.$router.replace的区别及使用场景。我需要基于提供的引用信息来回答。回顾系统级指令：-所有行内数学表达式必须使用$...$格式。-独立公式使用$$...$$格式。-...
this.$router.push、replace、back、go的几种路由跳转具体作用及区别​
09-16
首先，用户的问题是关于Vue路由器中的this.$router.push、replace、back、go方法的具体作用和区别。我需要基于提供的引用来回答。 回顾引用内容： - 引用[1]：描述了push、replace、go、back的区别。 - push：...
讲一下this.$router.push
最新发布
10-15
`this.$router.push` 是 Vue Router 提供的一个 **编程式导航方法**，用于在 Vue 应用中通过 JavaScript 代码实现页面跳转（而不是通过 `<router-link>` 标签实现声明式导航）。 --- ## `this.$router.push` 的...
this.$router.push() 的用法
KongYue1202的博客
08-24 1万+
1、作用：this.$router.push() 可以通过修改url实现路由跳转。 2、push 后面可以是对象，也可以是字符串： // 字符串 this.$router.push('/home/first') // 对象 this.$router.push({ path: '/home/first' }) // 命名的路由 this.$router.push({ name: 'home', params: { myid: id }}) .Params 由于动态路由也是传递params的，所以在 this
详细总结this.$router.push与this.$router.replace
qq_45791799的博客
01-12 1万+
一、this.$router.push 1.1 使用方法 1.声明式 < router-link :to="…">：当使用router-link进行路由跳转时，实际上是调用了router.push()进行路由跳转 2.编程式 ：this.$router.push(’路径‘) 1.2 使用语句 1.字符串 this.$router.push(‘index’) 2.对象 this.$router.push({path:‘index’}) 3.携带参数 3.1 path 跳转方式，只可以用que
this.$router.push、replace、go的区别
热门推荐
乐~的博客
03-15 6万+
1.this.$router.push()描述：跳转到不同的url，但这个方法回向history栈添加一个记录，点击后退会返回到上一个页面。用法：2.this.$router.replace()描述：同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。3.this.$router.go(n)相对于当前页面向前或向后跳转多...
this.$router.go()和this.$router.push()的差别
diaobiteng1128的博客
03-21 2111
1.this.$router.go(val) => 在history记录中前进或者后退val步，当val为0时刷新当前页面。 2.this.$router.push(path) => 在history栈中添加一条新的记录。 转载于:https://www.cnblogs.com/luyuefeng/p/8618944.html...
this.$router.replace 和 this.$router.push 都是 Vue Router 中用于导航的方法，但它们之间有几个关键的区别：
2201_75886962的博客
02-04 1912
this.$router.replace: 如果你想导航到一个新的页面，但不希望在历史记录中留下记录，可以使用这个方法。this.$router.replace: 这个方法会替换当前的历史记录，而不是添加一个新的记录。this.$router.push: 如果你希望在历史记录中留下记录，以便用户可以点击浏览器的后退按钮返回到前一个页面，你应该使用这个方法。this.$router.replace 接受与 this.$router.push 相同的参数，包括路径、名称、选项等。
路由，vue-router的基本用法，vue-router的常见用法$route.params、$router.push、$router.replace、$router.go
m0_47794838的博客
02-01 3676
路由，vue-router的基本用法，vue-router的常见用法$route.params、$router.push、$router.replace、$router.go
$router、$route、$router.push()和、$router.replace()
weixin_38599724的博客
11-14 2万+
1.this.$router是VueRouter的一个对象，表示全局路由器对象，项目中通过router路由参数注入路由之后，在任何一个页面都可以通过此方法获取到路由器对象，并调用其push(), go()等方法； 2.this.$router表示当前正在用于跳转的路由器对象，可以调用其name、path、query、params等方法； 3.console.log(this.$router)和...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值