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"));
}

  

posted @ 2018-05-03 11:58  叶韵  Views(9399)  Comments(0Edit  收藏  举报