刚好看见以前自己还没用vue的传参和接受参数的博客,想起现在自己用vue用的最多,那就记录一下vue的传参和接受参数的方式;
vue跳转路由用this.$router.push()方法,这个方法可以接受对象或者字符串两种参数:
我先说当是Object的时候,常用的有{path: ‘’,query:{},name:'',params:{}} path/name/query/params这四个属性,
================
使用params传参要用name不能使用path;使用params传参要用name不能使用path;使用params传参要用name不能使用path;
================
path/name是你路由配置的时候对应得path/name,对应写一个就好,query/params都是用来传参的是个对象,把你想传的参数按key/value写上,它们区别为query是把你参数拼接在路由后你在地址栏可以看见,而params帮你把参数给隐藏了,比如你传一个id参数值是123,那这个参数就是{id:'123'}。所以完整的跳转传参this.$router.push({name:'test',params:{id:'123'}})。这时候在你接受参数的页面用this.$route.params.id就可以取到参数值‘123’。这里的this.$route.params和你跳转的对应,你要是配置的是query,那也就是对应this.$route.query。
之前说this.$router.push()接受字符串,其实它是this.$router.push({path:'/test'})的简写,当没有参数的时候你就可以写成this.$router.push(‘/test’)。
到这里基本就把vue里参数使用和获取说完了,那我扩展一下,不一定正规的使用方法,this.$router.push(‘/test?id=123456’) 跳转地址带参数,获取this.$route.query.id一样可以取到123456。
================
使用params传参要用name不能使用path;使用params传参要用name不能使用path;使用params传参要用name不能使用path;
================
最近在学习vue源码,看得都是别人理解的,自己也有一点点心得。有机会分享一波,分享也是一种记忆。