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传到下个页面：

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