详细总结this.$router.push与this.$router.replace

最新推荐文章于 2025-06-13 09:50:14 发布

邵邵邵

最新推荐文章于 2025-06-13 09:50:14 发布

阅读量1.1w

点赞数 5

CC 4.0 BY-SA版权

分类专栏： Vue+Elementui工作随笔文章标签： vue.js

本文链接：https://blog.youkuaiyun.com/qq_45791799/article/details/122453567

Vue+Elementui工作随笔专栏收录该内容

21 篇文章

订阅专栏

本文详细介绍了Vue.js中this.$router.push和this.$router.replace的方法及应用，包括声明式和编程式的路由跳转方式，并对比了这两种方法的区别，特别是关于路由历史记录的处理。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一、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 跳转方式，只可以用query传参

this.$router.push( {path:‘login’, query: { userName: ‘01testuser2’}})

3.2 name 跳转方式，可以用query和params传参
this.$router.push( {name:‘login’, query: { userName: ‘01testuser2’}})

this.$router.push( {name:‘login’, params: { userName: ‘01testuser2’}})
3.3query传参与params传参区别：query传参相当于get请求，在浏览器的url地址中会显示参数；params相当于post请求，在浏览器的地址栏中不显示。

二、this.$router.replace

this. $r o u t e r . r e p l a c e 的使用与 t h i s .$ router.push相同，区别就是通过this. $r o u t e r . p u s h () 进行路由跳转，会在路由栈中添加一个记录，点击浏览器的返回时会跳转到上一个页面。而 t h i s .$ router.replace不会在路由栈中添加记录。