【Vue进阶】Vue项目需要从URL中获取参数

前言

问题描述： Vue项目需要从URL中获取参数，用了location.search，然后没找到数据（为空）。

---

一、Location扫盲

1)、Location 对象属性

属性	描述
hash	URL的锚部分（从#号开始的URL）
host	URL的主机名和端口号
hostname	URL的主机名
href	完整的URL
pathname	URL的路径名
port	URL的端口号
protocol	URL的协议
search	URL的查询部分（从?号开始的URL）

二、获取URL参数

1)、获取参数代码

	/**
     * 格式化URL地址参数
     * @param {*} data 数据源(格式如下)
     * @returns 格式化数据
     */
    formatURLData (data) {
      const tempArray = data.split('?')
      const searchQuery = tempArray[1]
      if (!searchQuery || typeof searchQuery !== 'string') return
      const result = {}
      searchQuery.split('&').forEach(item => {
        const tmp = item.split('=')
        result[tmp[0]] = tmp[1]
      })
      return result
    },
    // 获取URL参数
    getURLParams(){
      console.log('$route.query:', this.$route.query)
      const data = this.formatURLData(location.search)
      console.log('hash:', location.hash)
      console.log('search:', location.search, location.search && data)
    }

2)、测试结果

URL（示例1）：

http://localhost:8080/front_end/#/customer?name=test&phone=13200010002

query可以正常拿到参数：query在hash后面，可通过this.$route.query获取到。

URL（示例2）：

http://localhost:8080/front_end?name=test&phone=13200010002#/customer

search可以正常拿到参数：因为查询字符串search只能在取到“?”后面和“#”之前的内容，如果“#”之前没有“？”search取值为空。

结论：

1. location依据是协议://ip:端口/?xxx=xxx&xxx=xxx#hash这种顺序判断，search在hash前面，#后的内容为hash。
2. query在hash后面

3)、兼容性写法

可以取query或search中参数有值的数据即可。

    // 获取URL参数
    getURLParams(){
      console.log('$route.query:', this.$route.query)
      const query = this.$route.query
      const data = this.formatURLData(location.search)
      console.log('hash:', location.hash)
      console.log('search:', location.search, location.search && data)
      const name= (query && query.name) || (data && data.name)
      console.log('params.name:', name)
    }

总结

【Vue进阶】系列文章持续更新中……