码迷,mamicode.com
首页 > 其他好文 > 详细

vue动态获取地址栏参数

时间:2018-05-29 16:12:55      阅读:1757      评论:0      收藏:0      [点我收藏+]

标签:let   sub   console   ati   split   sea   get   .data   nbsp   

  data () {
    return {
      seller: {
        // 从url获取id参数
        id: (() => {
          let obj = {};
          // 获取url参数部分 大概长这样 ?id=213123&a=b
          let url = window.location.search;
          let reg = /[?&][^?&]+=[^?&]+/g;
          // 用正则匹配成数组 大概长这样 [?id=213123, &a=b]
          let arr = url.match(reg);
          if (arr) {
            arr.forEach((item) => {
              // 把字符串?id=123 转为数组 [id, 123]
              let tempArr = item.substring(1).split(‘=‘);
              // decodeURIComponent()可对encodeURIComponent()函数编码的URI进行解码。
              let key = decodeURIComponent(tempArr[0]);
              let val = decodeURIComponent(tempArr[1]);
              // 把键值对添加到obj中
              obj[key] = val;
            })
          }
          console.log(obj.id);
          return obj.id;
        })()
      }
    }
  },

请求数据时候就可以用地址栏的参数了

  created () {
    this.$ajax.get(‘/api/seller?id=‘ + this.seller.id).then((res) => {
      // 用Object.assign()方法赋值 不会覆盖seller已经存在的属性
      this.seller = Object.assign({}, this.seller, res.data.data);
    })
  }

 

vue动态获取地址栏参数

标签:let   sub   console   ati   split   sea   get   .data   nbsp   

原文地址:https://www.cnblogs.com/gr07/p/9105415.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!