Vue 路由 跳转【返回、刷新、跳转】

本文详细介绍了Vue中路由导航的各种方法,包括this.$router.go用于前进、后退和刷新,this.$router.back实现后退和刷新,以及this.$router.push和this.$router.replace进行页面跳转。通过实例展示了它们的不同用法,包括参数传递和URL变化。了解这些方法对于掌握Vue应用的页面流动至关重要。
摘要由CSDN通过智能技术生成

Vue 路由 跳转【返回、刷新、跳转】

this.$router.go(-1)

原页面表单中的内容会丢失;
向前或者向后跳转n个页面,n可为正整数或负整数

this.$router.go(-1):后退+刷新

this.$router.go(0):刷新;

this.$router.go(1) :前进

this.$router.back()

原页表表单中的内容会保留

this.$router.back():后退 ;

this.$router.back(0) 刷新;

this.$router.back(1):前进

this.$router.push

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

1. 不带参数

  • this.$router.push(’/home’)
  • this.$router.push({name:‘home’})
  • this.$router.push({path:’/home’})

2. query传参

  • this.$router.push({name:‘home’,query: {id:‘1’}})
  • this.$router.push({path:’/home’,query: {id:‘1’}})
  • html 取参 $route.query.id
    script 取参 this.$route.query.id

3. params传参

  • this.$router.push({name:‘home’,params: {id:‘1’}}) // 只能用 name
  • 路由配置 path: “/home/:id” 或者 path: “/home:id” ,
    不配置path ,第一次可请求,刷新页面id会消失
    配置path,刷新页面id会保留
    html 取参 $route.params.id
    script 取参 this.$route.params.id

4. query和params区别

  • query类似 get, 跳转之后页面 url后面会拼接参数,类似?id=1, 非重要性的可以这样传,
  • params类似 post, 跳转之后页面 url后面不会拼接参数 , 但是刷新页面id 会消失,密码之类还是用params刷新页面

this.$router.replace

跳转到指定url路径,但是history栈中不会有记录,点击返回会跳转到上上个页面 (就是直接替换了当前页面)【A----->B----->C 结果B被C替换 A----->C)】

用法同 this.$router.push
  • 5
    点赞
  • 51
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

半生过往

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值