vue页面带参跳转(用requirejs进行模块化)

最近开始用vue,对其简单地运用记录一下。
首先项目结构如下所示:
vue页面带参跳转(用requirejs进行模块化)_第1张图片

要实现的是从发送短信模块带参数跳到下个页面
首先:
在有跳转得页面的跳转按钮用标签包住:

<router-link>router-link>

加上
:to=”{path:’xzjsr’,query: {id:postdata.dept_id}}”

代码如下:

class="xzjsr" :to="{path:'xzjsr',query: {id:postdata.dept_id}}">
    type="text" name="" id="" value="" readonly="readonly"/>
    "./img/contact.png"/>

在需要接受参数的页面中解析参数:

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>
                    
                    <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>
                    
                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传到下个页面:
vue页面带参跳转(用requirejs进行模块化)_第2张图片

vue页面带参跳转(用requirejs进行模块化)_第3张图片

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

你可能感兴趣的:(vue学习笔记,requirejs)