最近开始用vue，对其简单地运用记录一下。 首先项目结构如下所示：
要实现的是从发送短信模块带参数跳到下个页面 首先： 在有跳转得页面的跳转按钮用标签包住：
<router-link></router-link>加上 :to=”{path:’xzjsr’,query: {id:postdata.dept_id}}”
代码如下：
<router-link class="xzjsr" :to="{path:'xzjsr',query: {id:postdata.dept_id}}"> <input type="text" name="" id="" value="" readonly="readonly"/> <img src="./img/contact.png"/> </router-link>在需要接受参数的页面中解析参数：
this.$route.query.id上面就是获取url参数中的方法。
完整例子如下： dxfs.html:
<div> <header class="headerfield"> <div class="button left0" v-on:click="goback"> <span></span>返回 </div> <div class="title" >短信发送</div> <div class="button right0"></div> </header> <div class='dxfsield'> <ul class="input-field"> <li> <label for=""> <span>选择部门{{postdata.dept_id}}</span> <select name="" v-model="postdata.dept_id" @change="getchange()"> <option value="" v-for="dep in departmentMsg" v-bind:value="dep.dept_id">{{dep.dept_name}}</option> </select> </label> </li> <li> <label for=""> <span>接收人{{postxzjsr}}</span> <!--<input type="text" name="" id="" value="" />--> <router-link class="xzjsr" :to="{path:'xzjsr',query: {id:postdata.dept_id}}"> <input type="text" name="" id="" value="" readonly="readonly"/> <img src="./img/contact.png"/> </router-link> <!--<select name="" v-model="postdata.recid"> <option value="" v-for="send in SendeeMsg" v-bind:value="send.user_id">{{send.user_name}}</option> </select> <img src="./img/contact.png"/>--> </label> </li> <li> <label for=""> <span>内容</span> <textarea name="" rows="" cols="" v-model="postdata.content"></textarea> </label> </li> </ul> <div class="button-field"> <button class="button button-block" @click="sendMsg()"> 发送短信 </button> </div> </div> </div>dxfs.js:
define(['vue', 'txt!../pages/dxfs.html','base'], function(v, dxfshtml) { var Foo = v.extend({ template: dxfshtml, data:function(){ base = { goback:function(){ window.history.back(); }, departmentMsg:[], //部门数据 SendeeMsg:[], //接收人 postdata:{}, //传输数据 postxzjsr:'' }; return base; }, mounted: function() { //选择部门模拟数据 base.departmentMsg=[ { "dept_id":01, "dept_name":"01" }, { "dept_id":02, "dept_name":"02" }, { "dept_id":03, "dept_name":"03" }, { "dept_id":04, "dept_name":"04" }, { "dept_id":05, "dept_name":"05" }, { "dept_id":06, "dept_name":"06" }, { "dept_id":07, "dept_name":"07" }, { "dept_id":08, "dept_name":"08" } ] }, methods:{ //选择部门 getchange:function(){//console.log(base.postdata.id) base.postxzjsr=base.postdata.id;//console.log(base.postdata.id) // console.log(base.postxzjsr) }, // //接收人在一个页面的下拉框 // getSendee:function(){ // base.postdata.inf_account='thapp'; // base.postdata.inf_token='123qwe!@#'; // //base.postdata.id='TEST'; // //base.postdata.id=id; // base.postdata.id=base.postdata.dept_id; // console.log(base.postdata.id) // if(base.postdata.id==undefined){ // baseobj.layerobj.alertmsg("请选择部门信息！"); // }else{ // baseobj.getJsonData('/sendsms/userinfo',base.postdata,function(data){ // console.log(data); // if(data.Status==1){ // base.SendeeMsg=data.ResultDataInfos; // }else{ // baseobj.layerobj.alertmsg("立即执行失败！") // } // // }); // } // }, //发送短息 sendMsg:function(){//console.log(base.postdata) base.postdata.inf_account='thapp'; base.postdata.inf_token='123qwe!@#'; //base.postdata.recid=base.postdata.; base.postdata.send_user_account=''; if(base.postdata.dept_id==undefined){ baseobj.layerobj.alertmsg("请选择部门信息！") }else{ base.postdata.id=base.postdata.dept_id; console.log("下面要调接口") } } } }); return Foo; });效果如下： 点击接收人，把上面部门的id传到下个页面：
完整代码下载地址：点击这里
