vue獲取地址欄傳過來的參數VS原生js獲取地址欄的參數

Vue的方式

Vue的 query方式

①this.$route.query.companyId ( companyId 為參數的名稱 是$route 不是 $router)

Vue的 params方式

②this.$route.push({path:'/home',name:'/homeView',params:{userName:'zhangsan',userAge:23 }})  

想要獲取參數信息，這里path屬性可選，但是無name屬性就無法獲取params內容 ，使用上面的編程時導航，也需要在路由配置文件中聲明

export default new Router({ 
  routes: [ 
   { path: '/', name: 'LoginView', component: LoginView },
   { path: '/home', name: 'HomeView', component: HomeView }
 ] 
})

　　獲取 this.$route.params   this.$route.params.userName

方法一：采用正則表達式獲取地址欄參數：（ 強烈推薦，既實用又方便！）

function GetQueryString(name)
{
     var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
     var r = window.location.search.substr(1).match(reg);
     if(r!=null)return  unescape(r[2]); return null;
}
 
// 調用方法
alert(GetQueryString("參數名1"));
alert(GetQueryString("參數名2"));
alert(GetQueryString("參數名3"));

下面舉一個例子:

若地址欄URL為：abc.html?id=123&url=http://www.maidq.com

那么，但你用上面的方法去調用：alert(GetQueryString("url"));

則會彈出一個對話框：內容就是 http://www.maidq.com

當然如果你沒有傳參數的話，比如你的地址是 abc.html 后面沒有參數，那強行輸出調用結果有的時候會報錯：

所以我們要加一個判斷 ，判斷我們請求的參數是否為空，首先把值賦給一個變量：

var myurl=GetQueryString("url");
if(myurl !=null && myurl.toString().length>1)
{
   alert(GetQueryString("url"));
}