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

1.this.$router.push()

描述:跳转到指定的url,但这个方法回向history添加一个记录,点击后退会返回到上一个页面。
用法:

// 1字符串
this.$router.push('/user/order')
// 2对象
this.$router.push({ path: '/user/order' })
//3传参
this.$router.push({ path: '/user/order', query: {id: 123} })
//3-1取参数
this.$route.query.id
//4命名的路由
this.$router.push({ name: '/user/order', params: {id: 123} })
//4-1取参数
this.$route.params.id
2.this.$router.replace()

描述:同样是跳转到指定的url,但是这个方法不会向history里面添加新的记录,点击返回,会跳转到上上一个页面。上一个记录是不存在的。
用法:同this.$router.push()

3.this.$router.go(n)

相对于当前页面向前或向后跳转n个页面。n可为正数可为负数。

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 编程式导航 1 .用在可复用的路由视图里面,比如所有的需要跳转到一个文章具体内容的路由,每一次跳转到新路由的时候,...
    skoll阅读 673评论 0 1
  • 那这次呢?我决定直接就先放一个小小demo上来 其实我们在引入vue-router插件那一刻,我们的网页就已经附带...
    看物看雾阅读 865评论 0 1
  • 一、router简单函数 1.this.$router.push() 描述:跳转到不同的url,但这个方法回向hi...
    樊小勇阅读 2,098评论 0 14
  • SPA单页应用 传统的项目大多使用多页面结构,需要切换内容的时候我们往往会进行单个html文件的跳转,这个时候受网...
    视觉派Pie阅读 11,983评论 1 55
  • 不知不觉已经到了该回去工作的时间了,突然内心无比不舍,但是却又得面对不得不走的无奈。人生这样的相聚和分别已经上演过...
    简洁一生阅读 587评论 0 2