vue页面带参跳转（用requirejs进行模块化）

最近开始用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传到下个页面：

完整代码下载地址：点击这里