vue中实现路由跳转的3种方式

vue中实现路由跳转的3种方式

在JS中使用$router操作路由跳转

$router.push

跳转到指定的URL,在history栈中添加一个记录,点击后退会返回上一个页面

1.不传参(3种写法)

this.$router.push('/home')
this.$router.push({
    name: 'home'
})
this.$router.push({
    path: '/home'
})

2.使用query传参(name或path)

this.$router.push({name:'home',query: {age:'12'}}) //推荐使用方式
this.$router.push({path:'/home',query: {age:'12'}})

3.使用params传参(name)

this.$router.push({name:'home',params: {age:'12'}})
this.$router.push({path:'/home',params: {age:'12'}}) //错误写法

使用path方式跳转,路由 path会忽略params ,所以path不能和params一起使用!!!

4.直接通过path传参

需要提供完整的路径字符串,包括路径和查询参数

const age = 12
this.$router.push('/home/${age}') 
this.$router.push({path:'/home/12'}) 

补充:使用$route接收路由参数

$route.query.age //html中
this.$route.query.age // script中

$route.params.age //html中
this.$route.params.age // script中

总结:
query相当于GET请求,页面跳转的时候,可以在地址栏看到请求参数,刷新页面时数据不会丢失
params相当于POST请求,参数不会在地址栏中显示,页面刷新数据会丢失

$router.replace

跳转到指定的url,不会向history里面添加新的记录,点击返回,会跳转到上上一个页面。上一个记录是不存在的。
用法同push。

// 直接path传参
this.$router.push('/home/12')
// 直接path传参
this.$router.push({ path: '/home/12' })
// name + params传参
this.$router.push({ name: 'home', params: { age: 12 }})

$router.go

相对于当前页面向前或向后跳转多少个页面,类似 window.history.go(n)。n可为正数可为负数。正数返回上一个页面。

this.$router.go(1) //前进一步 相当于history.forward()
this.$router.go(-1) //后退一步 相当于history.back()
this.$router.go(0) //刷新当前页面
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值