vue路由传参

标签：参数   地址   --   初学者   解密   localhost   nbsp   消失   导致   

vue路由间传参的方法有三种，原理其实都差不多，但是使用起来会有区别。好了，下面让代码说话。

为了清晰看到每种方法的不同，下面用一个表格显示各种方式的使用方法，对于初学者来说应该是一个很好的理解方式

{
path: ‘/recruit/:id‘,
name: ‘Recruit‘,
component: Recruit
}

{
path: ‘/recruit‘,
name: ‘Recruit‘,
component: Recruit
}

{
path: ‘/recruit‘,
name: ‘Recruit‘,
component: Recruit
}

this.$router.push({
  path: ‘/recruit/‘+id,
})

this.$router.push({
   name: ‘Recruit‘,
   params: {
     id: 1
  }
})

this.$router.push({
  path: ‘/recruit‘,
  query:{
     id:1
   }
})

http://localhost:8080/#/recruit/1

http://localhost:8080/#/recruit

this.$route.params.id

this.$route.params.id

this.$route.query.id

三种方法的使用已经列举，是否发现了里面的差异。总结一下每个方法的优缺点

方法1:优点--在路由中配置，节省后期请求时参数设置；缺点--需要在路由中提前配置好，且参数单一，无法传递对象，面对多个参数时，有点尴尬无法实现；

方法2:优点--无需在路由中配置，在逻辑中传递参数，可以传递多个参数，包括复杂对象；缺点--在地址栏中不显示参数（或者算优点），或导致跳转路由后，刷新页面参数消失，无法获取到参数（或许你正好需要这样的效果，那就不是缺点）；

方法3:优点--参数在路由中显示，比较清晰，且刷新页面，依旧可以获取到参数；缺点--参数暴露在地址栏，会造成安全隐患（可以加密，获取后再解密）；

知道了每种方法的优缺点，在实际工作中，可以按照需要，选择一种最合适的方法，如果不使用路由传参，也可以使用本地存储，这里就不再说了。

好了，vue路由传参就这些，是不是很清晰，认可点个??哦。

最后：前端工作辛苦，但也要好好休息。

vue路由传参

标签：参数   地址   --   初学者   解密   localhost   nbsp   消失   导致   

原文地址：https://www.cnblogs.com/cczk/p/9246224.html