vue跳转页面携带参数

2017年的时候使用Vue2.0做过一个系统,之后一直就在做JQuery,巩固了基础和数据库、java 的知识。2019年4月份开始用vue2.x来写,vue的基础的东西还是需要记录一下的。
页面跳转:
HTML:

<span @click="addGoods" class="addGoods">新增进件</span>

Script – methods :
不携带参数直接跳转:

 this.$router.push({
            path: '/datainputprogress'
          })

携带参数:

var ordercode = this.tbodyArr[index].ordercode ;
            var shopname = this.tbodyArr[index].shopname ;
            var branchname = this.tbodyArr[index].branchname ;
            this.$router.push({
                path: '/datainputprogress',
                query: {
                  ordercode: ordercode,
                  shopname:shopname,
                  branchname:branchname
                }
              })
 ***跳转后获取参数:***
 
 **方法一:**
 //获取地址栏信息
function getSearchString(key) {
    // 获取URL中?之后的字符
    var addrstr = location.href;
    var str = addrstr.substring(addrstr.lastIndexOf("?") + 1, addrstr.length); //shopcode=125806649&branchcode=001&recommendid=6&openidfrom=&awardto=1001

    // 以&分隔字符串,获得类似name=xiaoli这样的元素数组
    var arr = str.split("&");
    var obj = new Object();

    // 将每一个数组元素以=分隔并赋给obj对象
    for (var i = 0; i < arr.length; i++) {
        var tmp_arr = arr[i].split("=");
        obj[decodeURIComponent(tmp_arr[0])] = decodeURIComponent(tmp_arr[1]);
    }
    return obj[key] || '';
}
在created中:
created(){
	 this.ordercode = api.getSearchString('ordercode');
}
**方法二:**
toMallInfo: function(mallCode){
    this.$router.push({
      path: '/propertyInfo/mall/mallList',
      // name: 'mallList',
      query: {
        mallCode: 'M000989'
      }
    })
  },

    created(){
      	this.getParams()
    },
	methods :{
		getParams(){
	            // 取到路由带过来的参数
	            const routerParams = this.$route.query.mallCode
	            // 将数据放在当前组件的数据内
	            this.mallInfo.searchMap.mallCode = routerParams;
	            this.keyupMallName()
      }
    },
    watch: {
      '$route': 'getParams'
    }
  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值