发表于: 2020-03-03 23:24:41
1 1431
今天完成的事情
今天的完成的事情是继续写编辑页面,编辑页面和新增页面的功能其实是类似的只是把我们提交的请求改一下,因为我们在写新增的内容时是给新增的接口提交一次,编辑时给编辑的接口提交一次。在今天学习的过程中确实也是遇到了一个小的bug但是不能忽视,主要的原因是我们路由传值的用法,路由传值是分为两种写法,但是其中也是存在这区别。
1.query
1 2 3 4 5 6 7 | this .$router.push({ path: 'newApply' , query: { type: item.key, typeDesc: item.value } }) |
2.params
1 2 3 4 5 6 7 | this .$router.push({ name: 'newApply' , params: { type: item.key, typeDesc: item.value } }) |
比较用法
1.用法
query要用path来引入,params要用name来引入,接收参数都是类似的,分别是this.$route.query.name和this.$route.params.name。
2.url地址显示
query更加类似于我们ajax中get传参,params则类似于post,说的再简单一点,前者在浏览器地址栏中显示参数,后者则不显示
query
1 | http: //localhost:8080/workorder/newApply?type=BOX_DEPLOY&typeDesc=%E5%B0%8F%E7%99%BD%E7%9B%92%E9%83%A8%E7%BD%B2 |
params
1 | http: //localhost:8080/workorder/newApply |
3.注意点
query刷新不会丢失query里面的数据
params刷新 会会 丢失 params里面的数据
在使用的过程中发现即使我们使用了query这种写法的内容,我们第一次可以成功的把我们的一个对象通过这样的形式传输到另一个组件中,但是当我们再次刷新时这个页面的数据消失了,但当我们仅仅是传输一个字符串时query依旧能记录下我们的这个字符串,从而我的做法是再亲求了一次这个id中的对应数据
明天完成的事情
明天依然要完成编辑中的内容,上传图片的这一块内容需要加速完成
评论