Vue中this.$router.push路由跳转,刷新参数消失

Vue中this.$router.push路由跳转,刷新参数消失

this.$router.push({name:"",params:{id:""}})
name和params搭配刷新参数会消失

this.$router.push({path:"",query:{id:""}})
path和query搭配,刷新页面参数不会消失,query中参数成了url中的一部分。

在项目中,通过一个列表进入详情页,携带参数id渲染不同的详情页,动态传参使用编程式跳转。
vue传参方法一

在router路由配置中。

{
path: ‘/article/:id’,
name: ‘Article’,
component: Article,
}
在列表页中点击事件
handleClick(id){
this. r o u t e r . p u s h ( ‘ / a r t i c l e / router.push(`/article/ router.push(/article/{id}`) ;
}
在详情页中使用params获取
mounted() {
console.log(this.$route.params.id);
}

特点:方法一中需要在path中添加/:id来对应 $router.push 中path携带的参数。会把详情id暴漏在网址中。

vue传参方法二

在router路由配置中
{
path: ‘/article’,
name: ‘Article’,
component: Article,
}
在列表页中点击事件

handleClick(id){
this.$router.push({
name: ‘Article’,
params: {
id: id
}
})
}
在详情页中使用params获取

mounted() {
console.log(this.$route.params.id);
}
特点;这里不能使用:/id来传递参数了,因为父组件中,已经使用params来携带参数了。所以不会暴漏在网址中,同时也不会变化网址,router.afterEach也没有办法调用。

vue传参方法三

在router路由配置中

{
path: ‘/article’,
name: ‘Article’,
component: Article,
}
在列表页中点击事件

handleClick(id){
this.$router.push({
path: ‘/article’,
query: {
id: id
}
})
}
在详情页中使用query

在详情页中使用query获取

mounted() {
console.log(this.$route.query.id);
}
特点:这种情况下 query传递的参数会在url后面拼接上 ?id=?,同样会暴漏详情id

开始提到了编程式跳转,这里还要在说一种编程式不携参的跳转方式$router.go();
这个就随意提一下,就是类似于history.go()的方法,括号里面填个1就是前进一级页面,-1就后退一级页面。

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值