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'
    }

猜你喜欢

转载自blog.csdn.net/weixin_39407291/article/details/89454087