vue路由传参

Posted 2020-11-20 cczk

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

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

 

vue路由传参	方法1	方法2	方法3
路由配置	{ 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	http://localhost:8080/#/recruit?id=1
获取路由参数	this.$route.params.id	this.$route.params.id	this.$route.query.id

 

 

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

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

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

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

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

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

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