vue路由跳转时path和name的区别

用js实现跳转时有两种对应组合:

	this.$router.push({'name':one; params:{'id':id}});
	this.$router.push({'path':'/home'; query:{'id':id}});

也就是name和params组合使用,path和query组合使用。区别:
其实name和query也可以组合实现页面跳转,但是参数无法正常传递接收,
params传递参数在地址栏是看不到的,就跟post请求很像。query参数会显示在地址栏,
项目如果对地址栏的保密有要求,项目就要用name搭配params传递参数。
或者对地址栏的参数进行加密:
在router的index.js文件加一下方法:

parseQuery(query) {
    query = query ? aesDecrypt(query) : query;
    var res = {};
    query = query.trim().replace(/^(\?|#|&)/, '');
    if (!query) {
      return res;
    }
    query.split('&').forEach(function(param) {
      var parts = param.replace(/\+/g, ' ').split('=');
      var key = decodeURIComponent(parts.shift());
      var val = parts.length > 0
        ? decodeURIComponent(parts.join('='))
        : null;

      if (res[key] === undefined) {
        res[key] = val;
      } else if (Array.isArray(res[key])) {
        res[key].push(val);
      } else {
        res[key] = [res[key], val];
      }
    });
    return res;
  },
  stringifyQuery(obj) {
    var res = obj ? Object.keys(obj).map(function(key) {
      var val = obj[key];
      if (val === undefined) {
        return '';
      }
      if (val === null) {
        return encode(key);
      }
      if (Array.isArray(val)) {
        var result = [];
        val.forEach(function(val2) {
          if (val2 === undefined) {
            return;
          }
          if (val2 === null) {
            result.push(encode(key));
          } else {
            result.push(encode(key) + '=' + encode(val2));
          }
        });
        return result.join('&');
      }

      return encode(key) + '=' + encode(val);
    }).filter(function(x) { return x.length > 0; }).join('&') : null;
    return res ? ('?' + aesEncrypt(res)) : '';
  }

这样在地址栏的路径还在,参数进行了加密,刷新页面还是能拿到参数。

  • 3
    点赞
  • 14
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值