JS实现url地址栏参数拼接、更改或者删除,(根据筛选条件,一个方法实现)

本文介绍如何使用JavaScript通过正则表达式判断和处理URL参数,包括单参数、多个参数的情况,并实现URL的动态替换和新参数的添加,确保页面不刷新。

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

其实主要判断的点有两个,一共三种情况:
  • 判断url参数是否只有一个,使用一个参数的正则匹配
  • 判断多个参数:
    1、 判断是否是第一个参数
    2、判断是否是第二个参数
这两个点梳理出来就开始实现正则匹配,但是每次匹配的时候要考虑传入的值是否为空,如果为空要按上述两种情况去处理,把值替换为空串,如果不为空,按默认正则模板直接替换

代买实现:


/**
 * @description:
 * @param {string} name:传入的键名,参数名
 * @param {any} value:传入的值
 * @return {*}
 */
const changeURLPar = (name: string, value: any) => {
  // 定义需要替换的正则
  const pattern: string = name + '=([^&]*)'
  // 定义最终需要替换的值
  const replaceText: string = name + '=' + value

  // 获取url
  let url: string = location.href
  // 如果url已经含有参数
  if (url.match(pattern)) {
    // 默认模板正则
    const temp: string = '/(' + name + '=)([^&]*)/gi'
    // 只有一个参数
    const temp2: string = '/\\?(' + name + '=)([^&]*)/gi'
    // 两个参数  第一个参数
    const temp1: string = '/(' + name + '=)([^&]*)&/gi'
    // 有两个参数  并且非第一个参数
    const temp3: string = '/&(' + name + '=)([^&]*)/gi'
    const items = params()
    // 在替换参数的时候,此处首先判断参数个数  ===> 如果只有一个参数,替换?+后面的字段
    // 这里判断是不是第一个参数  第一个参数为null的时候要去掉
    if (items.length === 1) {
      url = judgeParams(value, temp, temp2, replaceText, url)
    } else {
      // 这里表示当前url的参数有两个
      // 首先判断第一个参数
      if (items[0].includes(name)) {
        url = judgeParams(value, temp, temp1, replaceText, url)
      } else {
        // 这里判断非第一个参数
        url = judgeParams(value, temp, temp3, replaceText, url)
      }
    }
  } else {
    if (value && value.length) {
      // url还未包含传入的参数,如果匹配到?,表示是第一个参数,反之不是
      if (url.match('[?]')) {
        url = url + '&' + replaceText
      } else {
        url = url + '?' + replaceText
      }
    }
  }

  // 最总替换页面参数  但是不刷新页面
  window.history.replaceState(
    {
      path: url,
    },
    '',
    url
  )
}

/**
 * @description: 这里获取url参数数组
 * @param {*}
 * @return {*}
 */
const params = ():string[] => {
  const query: string = location.search.substring(1)
  const querys: string[] = query.split('&')
  return querys //返回?号后面的参数名与参数值的数组
}


/**
 * @description:
 * @param {any} value 传入的值
 * @param {string} temp 默认正则模板
 * @param {string} temps 很具参数位置修改正则模板
 * @param {string} replace 需要替换的内容
 * @param {string} url:目标uel
 * @return {*}
 */
const judgeParams = (
  value: any,
  temp: string,
  temps: string,
  replace: string,
  url: string
): string => {
  if (value && value.length) {
    return url.replace(eval(temp), replace)
  } else {
    return url.replace(eval(temps), '')
  }
}
注释基本都写代码里面了,这样就可以实现url参数替换和删除了
<think>我们正在讨论Vue3中使用params传递路由参数时,页面刷新后参数丢失的问题。根据引用内容,我们可以总结如下: 原因分析: 1. **params传参的特性**:当使用params传参时,参数不会显示在URL中(除非在路由配置中定义了参数占位符)。如果路由配置中没有定义相应的参数占位符,那么刷新页面时,参数就会丢失。 2. **路由配置缺失**:如果路由路径中没有使用冒号(:)定义参数(如`path: '/user/:id'`),那么通过params传递的参数在刷新页面时无法被路由匹配,因此会丢失。 解决方案: 1. **在路由配置中定义参数占位符**:在路由的path属性中,使用冒号(:)后跟参数名来定义参数占位符。这样,参数就会成为URL的一部分,刷新页面时参数仍然保留在URL中,因此不会丢失。例如: ```javascript { path: '/user/:id', name: 'UserDetail', component: UserDetail } ``` 这样,跳转时使用: ```javascript router.push({ name: 'UserDetail', params: { id: 123 } }) ``` 生成的URL为:`/user/123`,刷新页面后,参数`id`仍然可以从`route.params.id`中获取。 2. **使用query传参替代**:query传参的参数会以查询字符串的形式出现在URL中(如`/user?id=123`),刷新页面不会丢失。但是,这种方式与params传参在URL显示和语义上有所不同。 3. **使用本地存储**:如果参数不适合暴露在URL中,可以使用`localStorage`或`sessionStorage`来存储参数,然后在目标页面取出。但要注意,这种方式需要手动管理存储和清除。 4. **使用路由的props配置**:在路由配置中设置`props: true`,可以将路由参数作为组件的props传递,这样在组件中就可以像使用props一样使用这些参数。这并不会解决刷新丢失的问题,但可以结合第一种方法使用。 根据引用[1][2][3][4][5]的说明,特别是引用[3]和[4]指出,在路由配置中定义参数占位符(如`path: "/testPage/:aaa/:bbb"`)可以解决刷新丢失问题。 因此,在Vue3中,解决params传参刷新丢失的关键是确保路由配置中包含了参数占位符。 具体步骤: 1. 修改路由配置,在path中定义参数: ```javascript // router/index.js import { createRouter, createWebHistory } from 'vue-router'; const routes = [ // ...其他路由 { path: '/detail/:id', // 定义参数id name: 'Detail', component: () => import('@/views/Detail.vue') } ]; const router = createRouter({ history: createWebHistory(), routes }); export default router; ``` 2. 跳转时使用命名路由(name)和params传递参数: ```javascript // 在源组件中 import { useRouter } from 'vue-router'; const router = useRouter(); router.push({ name: 'Detail', params: { id: 1001 // 这个id会被拼接URL中 } }); ``` 3. 在目标页面获取参数: ```javascript // 目标组件Detail.vue import { useRoute } from 'vue-router'; const route = useRoute(); const id = route.params.id; // 刷新后仍然可以获取到id ``` 4. 可选参数的处理:如果参数可能不存在,可以在路由配置中使用可选参数(添加问号?): ```javascript path: '/detail/:id?' ``` 注意事项: - 使用params传参时,必须使用命名路由(name)进行跳转,如果使用path跳转,params会被忽略(除非在path中已经包含了参数,如`path: '/detail/1001'`)。 - 参数URL中是可见的,因此敏感信息不应使用这种方式传递。 如果参数很多或者不适合放在URL中,可以考虑使用query传参(参数会以?key=value形式显示)或者使用本地存储(localStorage/sessionStorage)或状态管理(如Pinia)来传递参数。 总结:在Vue3中,使用params传参刷新页面丢失参数的原因是没有在路由配置中定义参数占位符,导致参数没有成为URL的一部分。解决方法就是在路由配置的path中定义参数占位符。</think>### Vue3 使用 params 传参刷新页面丢失参数的原因及解决方案 #### 🔍 参数丢失的根本原因 1. **URL 未包含参数信息** params 参数默认不会显示在 URL 中(如 `/user`),刷新时浏览器无法获取参数[^1][^3]。 2. **路由配置未定义参数占位符** 若路由配置中缺少 `:paramName` 占位符,Vue Router 无法解析参数[^3][^4]: ```javascript // ❌ 错误配置(刷新丢失参数) { path: '/user', component: UserPage } // ✅ 正确配置(参数保留在URL中) { path: '/user/:id', component: UserPage } // 添加 :id 占位符 ``` 3. **使用 path 替代 name 跳转** `router.push({ path: '/user' })` 会忽略 params 参数,必须使用命名路由[^1][^4]: ```javascript // ❌ 错误跳转(参数丢失) router.push({ path: '/user', params: { id: 123 } }) // ✅ 正确跳转(参数保留) router.push({ name: 'user', params: { id: 123 } }) ``` --- ### 🛠️ 完整解决方案 #### 步骤 1:配置含参数占位符的路由 ```javascript{3,7} // router/index.js const routes = [ { path: '/user/:userId', // 关键!添加参数占位符 name: 'userDetail', component: () => import('@/views/UserDetail.vue'), props: true // 可选:启用参数转props功能 } ] ``` #### 步骤 2:正确跳转传参 ```vue <script setup> import { useRouter } from 'vue-router' const router = useRouter() // ✅ 正确传参方式 const navigate = () => { router.push({ name: 'userDetail', // 必须使用命名路由 params: { userId: 123, // 参数名需匹配路由配置 name: 'John' // 支持多参数 } }) } </script> ``` #### 步骤 3:目标页面获取参数 ```vue <!-- UserDetail.vue --> <script setup> import { useRoute } from 'vue-router' // 方法1:通过路由对象获取 const route = useRoute() const userId = route.params.userId // → "123" const userName = route.params.name // → "John" // 方法2:通过props获取(需路由配置 props:true) const props = defineProps({ userId: String, // 自动注入路由参数 name: String }) </script> ``` #### 步骤 4:处理可选参数(非必传场景) ```javascript{3} // 路由配置添加问号?表示可选 { path: '/user/:userId?', // userId 变为可选 name: 'userDetail', component: ... } ``` --- ### ⚠️ 关键注意事项 1. **URL 显示问题** 使用此方案后,URL 将显示为 `/user/123`,参数暴露在地址栏中[^3][^4]。 2. **参数类型转换** `route.params` 返回字符串类型,数字需手动转换: ```javascript const id = Number(route.params.userId) ``` 3. **敏感信息处理** 机密参数(如 token)应使用其他方式传递: ```javascript // 使用 localStorage 存储敏感数据 localStorage.setItem('tempToken', 'abc123') router.push({ name: 'securePage' }) ``` --- ### 🔄 替代方案对比 | **方案** | URL 显示 | 刷新保留 | 适用场景 | |------------------------|---------------|----------|---------------------| | **params + 路由占位符** | `/user/123` | ✅ | 资源ID等核心参数 | | **query 传参** | `/user?id=123`| ✅ | 筛选条件等附加参数[^2]| | **本地存储** | 无变化 | ✅ | 敏感数据/大数据 | | **状态管理(Pinia)** | 无变化 | ❌ | 复杂状态共享 | > 根据引用[3][4][5],配置路由占位符是解决 params 刷新丢失的最可靠方案[^3][^4][^5]。 --- ### 💡 最佳实践建议 1. **核心参数用 params** 资源ID等关键参数使用 `params + 路由占位符` 方案 ```javascript // 跳转 router.push({ name: 'product', params: { id: 'P1001' } }) // 路由配置 { path: '/product/:id', name: 'product', ... } ``` 2. **附加参数用 query** 分页、排序等附加参数用 query 传递: ```javascript router.push({ name: 'search', query: { page: 2, sort: 'price' } }) ``` 3. **大数据用状态管理** 复杂对象使用 Pinia 等状态库: ```javascript // 存储 productStore.setCurrentProduct(item) // 获取 const product = productStore.currentProduct ``` --- 通过正确配置路由占位符和使用命名路由跳转,即可彻底解决 Vue3 params 传参刷新丢失的问题[^3][^4]。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值