history模式下，获取url中的参数，并解决乱码问题

原创于 2020-06-17 14:48:45 发布 · 1.7k 阅读

本内容遵循CC 4.0 BY-SA版权协议

收录于

本文介绍了在history模式下如何使用encodeURIComponent和decodeURIComponent来编码和解码URL参数，以解决乱码问题。例如处理http://xxx?userId='666'&userName=’用户名‘这样的URL。同时提供了获取参数的方法，并提到了在hash模式下获取参数的参考链接，以及sessionStorageSet和sessionStorageGet方法的封装详情链接。

encodeURIComponent 编码

decodeURIComponent 解码

例如：http://xxx?userId='666'&userName=’用户名‘

utils.js

// 获取url中的参数 history模式下
export function formatUrlParams() {
  let url = window.location.href
  let obj = {}
  if (url.indexOf('?') !== -1) {
    let startIndex = url.indexOf('?') + 1
    let str;
    if(url.indexOf('#') !== -1) {
      let endIndex = url.indexOf('#')
      str = url.substring(startIndex, endIndex)
    } else {
      str = url.substring(startIndex)
    }
    let strs = str.split('&')
    for (let i = 0; i < strs.length; i++) {
      obj[strs[i].split('=')[0]] = strs[i].split('=')[1]
    }
    return obj
  }
}

获取参数

import {formatUrlParams} from '@/utils/utils'

// 获取url上的userName
if (sessionStorageGet('userName')) {
  this.userName = sessionStorageGet('userName')
} else if (formatUrlParams() && formatUrlParams().userName) {
  this.userName = decodeURIComponent(formatUrlParams().userName)
  sessionStorageSet('userName', this.userName)
}

hash模式下，获取url中的参数，请参考链接：https://mp.csdn.net/console/editor/html/106806896

sessionStorageSet、sessionStorageGet方法封装，请参考链接：https://blog.csdn.net/qq_32678401/article/details/106807099

标签

#js