解決vue在ios或android中用webview打開H5連接時#號後面的參數被忽略問題angular一樣適用

 

在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