解决vue在ios或android中用webview打开H5链接时#号后面的参数被忽略问题angul

 

在ios或android如果直接用webview在打开H5链接例如：

打开：http://localhost:8080/#/answer?id=1509335039582001

会变成 http://localhost:8080/ 造成根本打开不了想要的页面（微信中获取网页授权的时候有#号也会有问题）

解决思路，链接中不写#号 打开后跳转到带#号的路由,把页面路由的代码定义为listType参数 后面的参数都先整个拼接

如这样 http://localhost:8080/?listType=answer&id=1509335039582001

我们在index中获取下页面接受到的参数：

 var  globalCons =  {};
  try  {
location.search.substr(  1 ).split( '  &  '  ).forEach( function(item){
  var  s = item.split( '  =  '  );
globalCons[s[  0 ]]=s[ 1  ];
});
}   catch  (e){
  throw   new   Error(JSON.stringify(search));
}
 

这样页面的参数都会保存在globalCons 对象中

console.log(globalCons) // globalCons = {"listType":"answer","id":1509335039582001 }

在main.JS 判断listType是否有值

 if   (globalCons.listType) {
   
        var  code ={};  //  路由的参数 
      code.id =  globalCons.id;

        var  r = {}     //  路由的name 
      r.name =  globalCons.listType;
      r.  params  =  code;
      $router.push(r);    //  解析跳转到对应页面 
 
} 

这样问题就解决了，

但是还有一个新的问题

路由的params需要手动去写，这样很不爽，我们可以定义一个固定格式传参时直接写好，让js自动追加参数

我们传参的时候统一传  params 这个参数 参数值为一个有规律的字符串

如：http://localhost:8080/?listType=answer&params=id.1509335039582001|type.60

params为我们想要追加的值
我们可以先拿到拆分的键和值 params.split("|")  // ['id.1509335039582001','type.60']

在循环数组按.拆分，就拿到最终结果

 //  跳转到指定页面的方法 
 var  code = {};
  if   (globalCons.listType) {
  if (globalCons. params  ){
  var   params  = globalCons. params .split( "  |  "  );

  params  .forEach(function(data){ 
code[data.split(  "  .  " )[ 0 ]] = parseInt(data.split( "  .  " )[ 1  ]);
}); 
}
  var  r =  {}
r.name  =  globalCons.listType;
r.  params  =  code;
$router.push(r);

} 

http://localhost:8080/#/answer?id=1509335039582001&type=60

查看更多关于解决vue在ios或android中用webview打开H5链接时#号后面的参数被忽略问题angul的详细内容...