一般的路由传参

this.$router.push({name:'My',params:{id:'123'}})
this.$router.push({path:'/my',query:{id:'123'}})

对于传参过后,跳转到的页面进行刷新行为,参数丢失问题,一般有下面几种方法

  1. 用query传参,query类似于get传参,参数会在url中显示,例如:
this.$router.push({path:'/my',query:{key: []}})

接收参数:

this.$route.query.key
  1. params传参,另外需要在定义路由时加上参数的key
    例如:
this.$router.push({name:'My',params:{key:[]}})

接收参数:

this.$route.params.key

还要在定义路由时加一个:key,例如:

{
  path: '/my/:key',
  name: 'My',
  component: My
}

这样实现的效果也是在路由中加了参数,看大家习惯,都可以做到刷新页面参数不丢失
3. 用query传参时,比如传了一个数组,那么在刷新页面后,传过来的数组变成了[object object]
解决方法:在传参的时候将要传递的参数转换成字符串,例如:

this.$router.push({path:'/my',query:{key: JSON.stringify([])}}) //JSON.stringify可以把数组或对象转变成字符串

在接受参数的页面,这样就可以解决这个问题

JSON.parse(this.$route.query.key)
Logo

前往低代码交流专区

更多推荐