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

yumihe

于 2020-06-17 14:48:45 发布

阅读量1.7k

点赞数 1

分类专栏： js 文章标签： js

本文链接：https://blog.youkuaiyun.com/qq_32678401/article/details/106807012

版权

js 专栏收录该内容

18 篇文章

订阅专栏

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

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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.youkuaiyun.com/console/editor/html/106806896

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