精华内容
下载资源
问答
  • vue获取当前url参数

    千次阅读 2019-08-28 15:32:49
    公司要从注册界面手动加上一个参数给我,我负责返回去给他们,不带的时候也能正常进入注册...url例子:http://172.16.1.140:8080/#/Invite?refererCode=123 this.refererCode = this.$route.query.refererCode ...

    公司要从注册界面手动加上一个参数给我,我负责返回去给他们,不带的时候也能正常进入注册界面,类似于推荐人分享那样。不过嘛,咱只是个小前端,咱不知道,咱也不敢问,大佬让做什么就做什么。

    url例子:http://172.16.1.140:8080/#/Invite?refererCode=123

    this.refererCode = this.$route.query.refererCode

     获取当前页面url

    console.log(window.location.href)

     

    展开全文
  • 基于vue获取当前url携带的参数前言:获取?后面的参数获取不带?的URL中的参数直接干代码 前言: 今天在开发项目的过程中,需要用的调用企业微信的接口,获取用户的相关信息,后端给的url里面携带了几个参数,需要...

    前言:

    今天在开发项目的过程中,需要用的调用企业微信的接口,获取用户的相关信息,后端给的url里面携带了几个参数,需要前端获取一下,然后再把这些参数传入到get的api请求中。
    加QQ技术交流群741843152,一起讨论哦~~~~
    欢迎访问我个人博客,里面有更多干货哟~~:点击即可访问
    关注博主微信公众号,获取更多关于前端的干货哦

    获取?后面的参数
      http://192.168.1.105:8080/#/idInput?username=%22%E5%BC%A0%E4%B8%89%22
    
     获取参数方法     let id = this.$route.query.username
    
    获取不带?的URL中的参数
      http://192.168.1.12:8080/#/home/newsinfo/234
    
    在路由中配置路由
    
    { path: '/home/newsinfo/:id', component: Newsinfo }
    
     .vue页面设置
    
    <template>
    
          <router-link :to="'/home/newsinfo/' + item.id">
    
    </template>
    
     获取参数方法    let id = this.$route.params.id
    

    注:转载于leahtao作者,点击即可访问

    直接干代码

    1.先在data中定义好全局变量

    
    ```javascript
    data() {
    	retrue {
    	staffNo:'',
    	tenantId:'',
    	}
    }
    

    2.在vue的created中写上

        created() {
          // 界面构建时开始获取url里携带的参数
          let staffNo = this.$route.query.staffNo
          let tenantId = this.$route.query.tenantId
          this.staffNo = staffNo
          this.tenantId = tenantId
          console.log(staffNo)
          console.log(tenantId)
          this.getBillDetails()
          // 这个一定是放在获取参数之后的
          this.getBillDetails()
    
        },
    

    3.就是发起具体的网络请求了

    getBillDetails() {     		
       getBillDetail(this.staffNo,this.tenantId).then(res => {
          const data = res.data.data
          this.obj = data
          console.log(data)
          // 判断服务器端返回的数据是要显示男或者女,返回true和false
          this.obj.sex === '男' ? this.showImage = true : this.showImage = false
            })
          }
    
    展开全文
  • 在WEB开发中,时常会用到javascript来获取当前页面的url网址信息,在这里是我的一些获取url信息的小总结。 1、window.location.href(设置或获取整个 URL 为字符串) var test = window.location.href; alert(test); ...

    在WEB开发中,时常会用到javascript来获取当前页面的url网址信息,在这里是我的一些获取url信息的小总结。
    1、window.location.href(设置或获取整个 URL 为字符串)

    var test = window.location.href;
    alert(test);
    返回:http://i.jb51.net/EditPosts.aspx?opt=1

    2、window.location.protocol(设置或获取 URL 的协议部分)

    var test = window.location.protocol;
    alert(test);
    返回:http:

    3、window.location.host(设置或获取 URL 的主机部分)

    var test = window.location.host;
    alert(test);
    返回:i.jb51.net

    4、window.location.port(设置或获取与 URL 关联的端口号码)

    var test = window.location.port;
    alert(test);
    返回:空字符(如果采用默认的80端口(update:即使添加了:80),那么返回值并不是默认的80而是空字符)

    5、window.location.pathname(设置或获取与 URL 的路径部分(就是文件地址))
    var test = window.location.pathname;
    alert(test);
    返回:/EditPosts.aspx

    6、window.location.search(设置或获取 href 属性中跟在问号后面的部分)

    var test = window.location.search;
    alert(test);
    返回:?opt=1

    PS:获得查询(参数)部分,除了给动态语言赋值以外,我们同样可以给静态页面,并使用javascript来获得相信应的参数值。

    7、window.location.hash(设置或获取 href 属性中在井号“#”后面的分段)

    var test = window.location.hash;
    alert(test);
    返回:空字符(因为url中没有)
    8、js获取url中的参数值

    一、split分割法

    function getQueryVariable(variable)
    {
           var query = window.location.search.substring(1);
           var vars = query.split("&");
           for (var i=0;i<vars.length;i++) {
                   var pair = vars[i].split("=");
                   if(pair[0] == variable){return pair[1];}
           }
           return(false);
    }
    
    
    
    //示例
    function GetRequest() {
     var url = location.search; //获取url中"?"符后的字串
     var theRequest = new Object();
     if (url.indexOf("?") != -1) {
      var str = url.substr(1);
      strs = str.split("&");
      for(var i = 0; i < strs.length; i ++) {
       theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
      }
     }
     return theRequest;
    }
    var Request = new Object();
    Request = GetRequest();<br>// var id=Request["id"]; 
    // var 参数1,参数2,参数3,参数N;
    // 参数1 = Request['参数1'];
    // 参数2 = Request['参数2'];
    // 参数3 = Request['参数3'];
    // 参数N = Request['参数N'];
    

    二、正则法

    function getQueryString(name) {
     var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
     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"));
    

    三、指定取

    function GetQueryString(name) { 
     var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i"); 
     var r = window.location.search.substr(1).match(reg); //获取url中"?"符后的字符串并正则匹配
     var context = ""; 
     if (r != null) 
       context = r[2]; 
     reg = null; 
     r = null; 
     return context == null || context == "" || context == "undefined" ? "" : context; 
    }
    alert(GetQueryString("j"));
    
    

    四、单个参数的获取方法

    function GetRequest() {
     var url = location.search; //获取url中"?"符后的字串
     if (url.indexOf("?") != -1) { //判断是否有参数
      var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
      strs = str.split("="); //用等号进行分隔 (因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔)
      alert(strs[1]);   //直接弹出第一个参数 (如果有多个参数 还要进行循环的)
     }
    }
    

    javascript 获取当前 URL 参数的两种方法

    //返回的是字符串形式的参数,例如:class_id=3&id=2& 
    function getUrlArgStr(){ 
      var q=location.search.substr(1); 
      var qs=q.split('&'); 
      var argStr=''; 
      if(qs){ 
        for(var i=0;i<qs.length;i++){ 
          argStr+=qs[i].substring(0,qs[i].indexOf('='))+'='+qs[i].substring(qs[i].indexOf('=')+1)+'&'; 
        } 
      } 
      return argStr; 
    } 
    //返回的是对象形式的参数 
    function getUrlArgObject(){ 
      var args=new Object(); 
      var query=location.search.substring(1);//获取查询串 
      var pairs=query.split(",");//在逗号处断开 
      for(var i=0;i<pairs.length;i++){ 
        var pos=pairs[i].indexOf('=');//查找name=value 
        if(pos==-1){//如果没有找到就跳过 
          continue; 
        } 
        var argname=pairs[i].substring(0,pos);//提取name 
        var value=pairs[i].substring(pos+1);//提取value 
        args[argname]=unescape(value);//存为属性 
      } 
      return args;//返回对象 
    } 
    

    示例

    <!DOCTYPE html>
    <html>
    	<head>
    		<meta charset="utf-8" />
    		<title></title>
    		<script>
    			var url;
     
    			url = window.location.href; /* 获取完整URL */
    			alert(url); /* http://127.0.0.1:8020/Test/index.html#test?name=test */
     
    			url = window.location.pathname; /* 获取文件路径(文件地址) */
    			alert(url); /* /Test/index.html */
     
    			url = window.location.protocol; /* 获取协议 */
    			alert(url); /* http */
     
    			url = window.location.host; /* 获取主机地址和端口号 */
    			alert(url); /* http://127.0.0.1:8020/ */
     
    			url = window.location.hostname; /* 获取主机地址 */
    			alert(url); /* http://127.0.0.1/ */
     
    			url = window.location.port; /* 获取端口号 */
    			alert(url); /* 8020 */
     
    			url = window.location.hash; /* 获取锚点(“#”后面的分段) */
    			alert(url); /* #test?name=test */
     
    			url = window.location.search; /* 获取属性(“?”后面的分段) */
    			alert(url);
     
    			/* 如果需要URL中的某一部分,可以自己进行处理 */
    			url = window.location.pathname;
    			url = url.substring(url.lastIndexOf('/') + 1, url.length);
    			alert(url); /* /index.html */
     
    			/* 
    			 * 如果页面使用了框架(frameset)
    			 * 要获取到指定页面的URL
    			 * 只要把window换成指定的页面即可
    			 */
    			/* 'frame'为指定页面的class名 */
    			var url = window.parent.frames['frame'].location.href;
    			/* 获取当前地址栏中显示的URL */
    			var url = window.parent.location.href;
    			/* window parent 可互换 */
    			var url = parent.window.location.href;
    		</script>
    	</head>
    	<body>
    	</body>
    </html>
    

    VUE.JS获取url参数
    第一种 this.$route.params.lib_id
    第一种是用于以下情况

    router-link :to="'/goodsinfo/'+ subitem.artID"  class="">
        <div class="img-box">
            <img  v-lazy =subitem.img_url>
        </div>
        <div class="info">
            <h3>{{subitem.artTitle}}</h3>
            <p class="price">
                <b>{{subitem.sell_price}}</b></p>
            <p>
                <strong>库存 {{subitem.stock_quantity}}</strong>
                <span>市场价:
                    <s>{{subitem.market_price}}</s>
                </span>
            </p>
        </div>
    </router-link>
    

    第二种 this.$route.query.lib_id

     this.$router.push({ path: `/library/targets?lib_id=${index.LibId}` })
       //获取id
       let req_lib_id = this.$route.query.lib_id
    

    JQ获取url参数

    function getQueryVariable(variable)
    {
           var query = window.location.search.substring(1);
           var vars = query.split("&");
           for (var i=0;i<vars.length;i++) {
                   var pair = vars[i].split("=");
                   if(pair[0] == variable){return pair[1];}
           }
           return(false);
    }
    
    展开全文
  • vue如何获取当前路径url参数

    万次阅读 2018-11-21 11:55:25
    有时候开发需要获取当前url参数 完整url可以用 window.location.href 路由路径可以用 this.$route.path 路由路径参数 this.$route.params (params是参数名称) 也可以直接watch监听一下当前路由的信息 ...

    有时候开发需要获取当前url的参数

    完整url可以用

    window.location.href

    路由路径可以用

    this.$route.path

    路由路径参数

    this.$route.params
    (params是参数名称)

    也可以直接watch监听一下当前路由的信息

    watch:{
      $route(to, from) {
         console.log(window.location.href);
         console.log(this.$route.path);
         console.log(this.$route.params);
      }
    }
    
    展开全文
  • vue获取当前页面URL参数id 第一步:首先我们在utils文件夹下创建一个getUrlParams.js文件,在里面写入代码如下: // 获取参数 export function GetUrlParam(name) { var url = window.location.href; let ...
  • VUE获取当前url及处理

    千次阅读 2019-11-08 10:39:54
    vue获取当前url 完整url window.location.href 路由路径 this.$route.path 路由路径参数 this.$route.params 处理url parseQuery(url) { let o = {}; let queryString = url.split("?")[1]; if (queryString...
  • VUE跳转及获取url参数

    千次阅读 2019-08-30 19:33:26
    最近做了一个vue的小的项目,是由外部链接打开的,所以就要涉及从外部url获取参数。 虽然不是很难的问题,但是在最初遇到这个问题的时候也头疼了一小会儿~ (汗颜,遇到未知的东西总会先头疼一下,实际做起来才...
  • 在路由在设置path { path: '/detail/:id/', name: 'detail', component: detail, meta: { ...获取url参数 let id = this.$route.params.id 注意 参数名需要保持一致 错误URL:http://127.0.0.1...
  • vue获取当前页面路由及参数

    千次阅读 2020-06-30 12:05:25
    代码: 当前页面 完整url可以用 window.location.href 路由路径可以用 this.$route.path 路由路径参数 this.$route.params
  • Vue如何获取当前页面的url参数

    千次阅读 2019-06-28 17:40:09
    注意:在视图层使用把this去掉,使用“Mustache”语法 (双大括号) 的文本插值 如:{{$route.params.id}} ...路由路径参数 this.$route.params /user/:id → /user/12 this.$route.params.id;//12 ...
  • 项目是H5,需要嵌入到App中,用户进入App时,点击H5会有一个url,并携带一个用户token参数,H5需要获取这个token. 1、弦方法 main.js文件,进行全局注册 Vue.prototype.$getURLParams = function() { var url = ...
  • 当前页面 Vue如何获取当前页面的url,获取路由地址 完整url可以用window.location.href 路由路径可以用this.$route.path 路由路径参数this.$route.params例如:/user/:id → /user/2044011030 → this.$route....
  • B页面通过接收sno参数,请求获取数据: // 查询商品详情, 在created生命周期调用 async getGoodsInfo () { const res = await this.$post(this.$url.goods.gooddetail, { sno: this.$route.query.sno }) } B...
  • vue获取当前页面路由

    万次阅读 2019-04-12 15:43:33
    当前页面 完整url可以用 window.location.href 路由路径可以用 this.$route.path 路由路径参数 this.$route.params
  • 当前页面 Vue如何获取当前页面的url,获取路由地址 完整url可以用 window.location.href 路由路径可以用 this.$route.path 路由路径参数 this.$route.params 例如:/user/:id → /user/2044011030 → this.$route....
  • 因之前VUE项目里面使用到里面的部分功能,因此对该部分内容做了归纳整理,可能不是很全: 1、设置或获取整个 URL 为字符串 window.location.href 2、设置或获取 URL 的协议部分 window.location.protocol 3、设置...
  • vue获取上级路由地址

    千次阅读 2020-02-17 15:01:31
    可以通过从vue-router中beforeRouteEnter钩子函数中的from参数获取url,利用next()传递回当前组件,具体代码如下: <sctipt> export default { data() { return { beforeUrl: '' } ...
  • 最近项目里有这样一个需要,用户可以通过外部链接进入我们的系统,我们需要从它携带的参数token中获取该值,但是该值在获取后含有特殊字符,如空格、#等。 首先我们需要先了解基本网址URL中特殊字符转义编码 ...
  • vue2-获取上页的url地址

    千次阅读 2018-06-14 23:20:48
    vue2的项目中有一个需求需要获取上一页路由的url的地址,在网上找了一会也没有找到合适的答案,最后还是在官方文档中找到了答案,因此将此方法记录下来,希望能给有需要的人提供一点帮助。 思路 思路其实很...
  • 在很久之前写过一篇文章【javascript获取URL链接和js链接中的参数】,在那篇文章里我们讲解了如何直接获取当前页面链接中的参数,和修改后获取任意url参数。 不过在最近的需求里,之前文章里的知识已经无法满足了...
  • 项目中有一需求,需要根据不同的页面路径url跳转进行不同的操作,首先需要获得上一页面的url,利用 beforeRouteEnter 这个钩子中的from参数获得之前url的信息,然后给 next 传递回调来访问当前组件的实例。操作代码为:...
  • vue 获取跳转上一页组件信息

    千次阅读 2018-11-28 18:28:58
    项目中有一需求,需要根据不同的页面路径url跳转进行不同的操作,首先需要获得上一页面的url,利用 beforeRouteEnter 这个钩子中的from参数获得之前url的信息,然后给 next 传递回调来访问当前组件的实例。  操作...

空空如也

空空如也

1 2 3 4
收藏数 79
精华内容 31
关键字:

vue获取当前url参数

vue 订阅