要想技术进步,踩坑是必经之路,今天一坑:页面params传值。
vue页面params传值的坑
a.vue向b.vue传值
a.vue
this.$router.push({ path: '/payType', query: { putUpList: this.putUpList, name:'111' }, params:{ cartList: this.cartList, totalMoney: this.totalMoney } });
b.vue
mounted:function(){ console.log(this.$route.params) console.log(this.$route.query) }
找问题
query可以拿到,params拿不到
需要在注册路由的地方给路由加上name参数
const router = new VueRouter({ routes:[{ ... },{ path:'/payType', name:'inputComp', component: payType }] })
a.vue跳转路由的地方同样加上name参数,b.vue就可以拿到params了
this.$router.push({ path: '/payType', name: 'inputComp', query: { putUpList: this.putUpList, name:'111' }, params:{//一定要设置name,才可以传params cartList: this.cartList, totalMoney:this.totalMoney } });
vue跨页面传值的精妙
众所周知,以前开发者只要掌握HTML、CSS、JavaScript 三驾马车就能胜任一份Web前端的工作。而在技术日新月异的现在,Vue, React,Angular在代替旧的前端框架已经是大势所趋了。
vue简介
Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层,不仅易于上手,还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue 也完全能够为复杂的单页应用提供驱动。
是一个兴起的前端js库,是一个精简的MVVM。从技术角度讲,Vue.js 专注于 MVVM 模型的 ViewModel 层。它通过双向数据绑定把 View 层和 Model 层连接了起来,通过对数据的操作就可以完成对页面视图的渲染。
与ajax比较
vue本身不支持ajax请求,需要借助vue-resource,axios插件。vue2官方推荐axios,是一个基于Promise的HTTP请求客户端,不再对vue-resource进行维护和更新。
axios([options]) axios.get(url[,options]);
传参方式:
通过url传参
通过params选项传参
axios.post(url,data,[options]);
axios默认发送数据时,数据格式是Request Payload,并非我们常用的Form Data格式,所以参数必须要以键值对形式传递,不能以json形式传参
传参方式:
自己拼接为键值对
使用transformRequest,在请求发送前将请求数据进行转换
如果使用模块化开发,可以使用qs模块进行转换
axios本身并不支持发送跨域的请求,没有提供相应的API,作者也暂没计划在axios添加支持发送跨域请求,所以只能使用第三方库
ajax传参格式
ajax是jquery封装的一个前端方法,通过请求后台API接口方式,用以局部刷新和动态展示页面。
$.ajax({ url: "http://localhost:8082/boot/request/parameter", type: "post", contentType: "application/json;charset=utf-8", data: JSON.stringify({name: "aaa", foo: ["bar1", "bar2"]}), success: function (json) { console.log(json); } });
vue传参格式
场景:点击父页面的XX查询按钮,弹出子页面queryView,父页面选中的某行记录值传到子页面中,子页面请求后台Api关联查询并展示父页面选中记录对应的明细记录。
在父页面定义方法query()
const rows为父页面查询列表选中的某行记录
queryView为子页面
params 为定义的传值对象
callback 回调方法
query() { let title = "XX查询" const rows = this.$refs.multipleTable.selection; this.$dialog.modal(queryView, { title: title, width: 1200, height: 600, params: {domain: Object.assign({}, rows[0])}, callback: data=> { if(data.flag == true) this.queryData() } }); }
子页面中定义接收参数对象,接收参数对象有3种格式:变量、对象、常量
这里定义为对象 Object
props:{ domain: { type: Object, default: function() {} } }
调用后台api接口关联查询并展示
params 定义方法中变量,获取从父页面接收的对象中的属性值
this.operat4Data(XXApi.getList, params, null, null); 调用后台api接口及传参
queryData() { let params = {apiParams:this.domain.apiParams}; let respData = this.operat4Data(XXApi.getList, params, null, null); respData.then( data => { this.dataList = data.posts; this.total = data.count; }); }
vue的优势
vue因其极具方便灵活易用等特性,为广大前端开发者所推崇和使用。
网友评论文明上网理性发言 已有0人参与
发表评论: