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)) : '';
  }

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

©️2020 CSDN 皮肤主题: 大白 设计师:CSDN官方博客 返回首页