vue中的this.$router.replace()和.push()和.go()的区别解析

最新推荐文章于 2024-04-28 13:49:25 发布
最新推荐文章于 2024-04-28 13:49:25 发布
阅读量1.7k 收藏 4
点赞数
分类专栏： 前端 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42426993/article/details/122330622
版权

1. this.$router.push()

跳转到不同的url，但这个方法会向history栈添加一个记录，点击后会返回到上一个页面。

2. this.$router.replace()

跳转到不同的url，这个方法不会向history栈添加一个记录，点击后会返回到上上一个页面

3. this.$router.go(n)

向前向后跳转n个页面，n为正数向前跳转n个页面，负数后退n个页面

灬繁花落雨灬
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue-router 2.0 跳转之router.push()用法说明
10-14
this.$router.push({ path: '/my/profile', query: { ...this.$route.query, ...queryData } }); ``` 针对描述中提到的问题，即在 iOS 设备上点击返回键时，路由改变但页面内容不更新，解决方案是利用 Vue Router ...
详解vue-router 2.0 常用基础知识点之router.push()
12-02
总结一下，`router.push()` 方法是Vue Router中进行程序化导航的核心，可以配合各种参数和选项实现复杂的导航逻辑。同时，`replace` 选项提供了无痕导航的能力，避免在历史记录中留下新的条目。理解并熟练掌握这些...
Vue中this.$router.replace和this.$router.push的区别
热门推荐
weixin_50723416的博客
08-09 3万+
this.$router.push 跳转到指定URL，向history栈添加一个新的纪录，点击后退会返回至上一个页面。 声明式：< router-link :to = “…” > 编程式：< router.push(…) > // 该方法的参数可以是一个字符串路径，或者一个描述地址的对象。 // 字符串 this.$router.push('/index') // 对象 this.$router.push({path:'/index'}) // 带查询参数，变成/backen
this.$router.replace 和 this.$router.push 都是 Vue Router 中用于导航的方法，但它们之间有几个关键的区别：
2201_75886962的博客
02-04 1383
this.$router.replace: 如果你想导航到一个新的页面，但不希望在历史记录中留下记录，可以使用这个方法。this.$router.replace: 这个方法会替换当前的历史记录，而不是添加一个新的记录。this.$router.push: 如果你希望在历史记录中留下记录，以便用户可以点击浏览器的后退按钮返回到前一个页面，你应该使用这个方法。this.$router.replace 接受与 this.$router.push 相同的参数，包括路径、名称、选项等。
Vue Router中的replace与路由守卫
最新发布
yxh_live的博客
04-28 1134
Vue Router中的replace与路由守卫
路由跳转push和replace的区别
ourring的博客
05-10 1182
在Vue.js中，和都用于改变当前路由并导航到另一个路由。
Vue2-replace属性、编程式路由导航、缓存路由组件、两个新的生命周期钩子、路由守卫、路由器工作模式
weixin_56498069的博客
08-31 1371
Vue2-replace属性、编程式路由导航、缓存路由组件、两个新的生命周期钩子、路由守卫、路由器工作模式
vue：this.reload()跟this.$router.replace的区别
qq_43631129的博客
12-12 491
this.reload()跟this.$router.replace的区别
vue.mini.js vue-router.js
01-04
6. **编程式导航**：除了通过链接进行导航，还可以在组件的方法中使用`this.$router.push`或`this.$router.replace`进行编程式导航。 Vue Router支持多种高级特性，比如： - **命名路由**：通过`name`属性给路由...
ppt课件-第9章 Vue路由vue-router.zip
03-22
Vue Router还支持编程式导航，即通过调用`this.$router.push`、`this.$router.replace`等方法来改变当前路由，而非依赖用户的点击事件。 总结起来，Vue Router是Vue.js应用程序中不可或缺的一部分，它为SPA提供了...
Vue 中router的push与replace的区别
Cloud-Future的博客
01-22 2923
1.this.$router.push({}) push 方法可以接受一个对象参数， { path:'/to', name:'route name' ... } 描述：跳转到对应的路由，这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。 2.this.$router.replace({}) replace参数同push一样 描述：同样是跳转到指定的路由，但是这个方法不会向history里面添加新的记录，而是替换（覆盖）掉当前路由，点击返回，会跳转到
vue中路由跳转的几种方式以及传递的参数
weixin_49524417的博客
07-27 1093
vue路由跳转的四中方式 1. router-link 2. this.$router.push() (函数里面调用) 3. this.$router.replace() (用法同push) 4. this.$router.go(n) 一、不带参 1 router-link <router-link :to="{name:'login'}"> <router-link :to="{path:'/login'}"> //这里根据页面的name...
Vue页面中使用this.$router.replace访问同一页面，数据不刷新的问题
qq_39182029的博客
05-13 9841
Vue页面中使用this.$router.replace访问同一页面，数据不刷新的问题 问题原因： vue路由切换实际是组件间的切换，在我的详情页中，钩子方法使用的是created()方法，在不强制刷新或者重启时只会创建一次，所以引用相同组件的时候，页面数据就无法刷新。 我的解决方法： 方法1.在详情页添加一个watch监听路由变化（不推荐，每次返回时会刷新一次列表数据，用户体验不好） watch：{ '$route' (to,from){ this.$router.go(0); } } ​
关于this.$router.push、replace、go的用法和区别
weixin_46100406的博客
03-28 364
this.$router.push 跳转到指定url路径，并想history栈中添加一个记录，点击后退会返回到上一个页面 // 字符串 this.$router.push('index') // 对象 this.$router.push({path: 'login-pw'}) // 带参数 this.$router.push({path: 'login-pw', query: {'acc...
vue路由的四种跳转方式
RistonTea的博客
12-18 7803
一、router-link 1. 不带参数 <router-link :to="{name:'aa'}"> <router-link :to="{path:'/bb'}"> //name,path都行, 建议用name // 注意：router-link中链接如果是'/'开始就是从根路由开始，比如当前此时的路由是xxx/aa，:to="/bb",点击后路径就是xxx/...
vue.router router.replace点两次返回问题及解决方案
大桶爆米花eee
01-04 7939
三个页面a , b , c , a页面router.push跳转至b，b再router.push跳转至c，c使用$router.replace(&quot;b&quot;)回到b，然后点击b页面的返回键，需要点击两次才能回到a页面。 通过进一步的观察发现，第一次点击其实并不是没有反应，而是页面返回到了首次的b页面。 这就是说，在C页面使用replace替换掉的是C页面的路由，C页面之前的B页面历史记录还存在。 要c保...
this.$router.push、replace、go的区别
weixin_30437481的博客
06-20 2875
1.this.$router.push() 描述：跳转到不同的url，但这个方法会向history栈添加一个记录，点击后退会返回到上一个页面。 用法： 2.this.$router.replace() 描述：同样是跳转到指定的url，但是这个方法不会向history里面添加新的记录，点击返回，会跳转到上上一个页面。上一个记录是不存在的。 3.this.$router.go(n) 相...
vue 中router.go；router.push和router.replace的区别
div_ma的博客
03-07 2万+
router.go(n) 这个方法的参数是一个整数，意思是在 history 记录中向前或者后退多少步，类似 window.history.go(n) router.push(location) 想要导航到不同的 URL，则使用 router.push 方法。这个方法会向 history 栈添加一个新的记录，所以，当用户点击浏览器后退按钮时，则回到之前的 URL。 router.repla...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值