utils工具函数之清空地址栏参数

最新推荐文章于 2025-05-11 15:41:41 发布

原创

最新推荐文章于 2025-05-11 15:41:41 发布 · 302 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

该文章介绍了一个JavaScript函数clearUrlQuery，用于在页面跳转后清除URL中的查询参数，以避免页面刷新时因参数存在而重复执行某些操作。通过split方法获取URL的基础部分，并使用history.pushState进行无刷新更新。

问题

携带参数进行跳转后，参数需要清空，防止刷新重复执行。

function clearUrlQuery() {
   
   
  const url = window.location.href
  const valiable = url.split('?')[0]
  window.

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

2025专业AI写手!

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

js如何删除地址栏中的参数

zoepriselife316的博客

08-02

2550

js去地址中参数

Pytest系列——allure（原理）之allure工具与Pytest测试框架集成

mashang_z111的博客

10-26

4781

1、Allure Framework是一种灵活的轻量级多语言测试报告工具，不仅可以以简洁的Web报告形式非常简洁地显示已测试的内容，也允许参与开发过程的每个人从日常测试中提取最大程度的有用信息。2、从开发/质量保证的角度来看，Allure报告可以缩短常见缺陷的生命周期：可以将测试失败划分为bug和损坏的测试，还可以配置log，step，fixture，attachments，timings，历史记录以及与TMS的集成以及Bug跟踪系统，因此负责任的开发人员和测试人员将掌握所有信息。

参与评论您还未登录，请先登录后发表或查看评论

vue使用路由的query配置项时如何清除地址栏的参数

EchoLiner的博客

04-30

4834

但这又会产生一个问题，如果是移动端项目还好，如果是pc端项目，当用户点击浏览器的返回箭头时，又回先显示。当触发popState事件时，跳转到原来的movies页面，问题解决。解决方式二：跳转路由路径时query参数没带过去，所以被清除了。把Movies.vue的参数传到Cinemas.vue。解决方式一：清空query的值。写vue项目时，如果想通过。路由的query配置项。

vue清除地址栏路由参数

lihefei_coder的博客

04-09

2万+

vue清除地址栏路由参数

vue 清空地址栏的参数

MtangEr的博客

02-21

1976

当我们想要继续保持在该页面时，并且要清空地址栏参数。方法一： let path = this.$route.path; //先获取路由路径 this.$router.push(path); //再跳转路由路径，query参数没带过去，所以被清除了方法二： this.$router.push({ query: {} }); 参考原文：https://blog.csdn.net/lihefei_coder/article/details/105410470 ...

vue设置刷新后去除地址栏中的参数

weixin_45832746的博客

06-13

2611

之后在生命周期beforeUpdate中调用即可。首先需要这个清除方法。

( 持续更新，目前含 200+ 工具类 ) DevUtils 是一个 Android 工具库, 主要根据不同功能模块，封装快捷使用的工具类及 API 方法调用。

afkT 的博客

09-24

5597

About DevUtils 是一个 Android 工具库, 主要根据不同功能模块，封装快捷使用的工具类及 API 方法调用。该项目尽可能的便于开发人员，快捷、快速开发安全可靠的项目，以及内置部分常用的资源文件，如color.xml、(toast) layout.xml等 Gradle Step 1. Add the JitPack repository to your build fil...

希望每天都能进步一点点

02-16

598

小程序路由管理：页面跳转与参数传递全解析

小程序开发

05-11

1095

页面跳转的5种基础方式及其内存管理差异8种参数传递技术的实现原理与适用场景页面栈结构对路由性能的影响机制路由操作与生命周期钩子的联动关系复杂业务场景下的路由优化策略核心概念：解析页面栈模型与路由基本原理跳转技术：分场景讲解5种跳转API的实现差异传参方案：对比8种参数传递方式的适用场景实战案例：演示电商、工具类小程序典型路由场景优化策略：提供性能优化与异常处理最佳实践页面栈：小程序维护的内存数据结构，存储当前打开的所有页面实例，遵循后进先出原则路由操作。

vue-router删除页面参数或清除地址栏路由参数

weixin_53954018的博客

09-17

7421

/ XXX代表要删除的参数（即url参数key）delete this.$router.push({query:{}}) 删除页面参数。delete this.$route.query.code 删除页面参数。2.清除地址栏路由参数。

去除地址栏的某个参数

Xue_BT的博客

10-28

988

【代码】去除地址栏的某个参数。

Hutool Http客户端工具类-HttpUtil使用

热门推荐

旭东怪的博客

02-18

3万+

HttpUtil是应对简单场景下Http请求的工具类封装，这个工具类可以保证在一个方法之内完成Http请求。 1HttpUtil.get() 用于请求普通页面，然后返回页面内容的字符串，同时提供一些重载方法用于指定请求参数。 // 最简单的HTTP请求，可以自动通过header等信息判断编码，不区分HTTP和HTTPS String result1= HttpUtil.get("https://www.baidu.com"); // 当无法识别页面编码的时候，可以自定义请求页面的编码 Strin.

JS去除地址栏参数

tt5678921的博客

07-15

1688

JS去除地址栏参数

JS-删除url参数

wang704987562的博客

11-29

7242

JS删除url参数 function removeURLParameter(url, parameter) { var urlparts = url.split('?'); if(urlparts.length >= 2) { //参数名前缀 var prefix = encodeURIComponent(parameter) + '='; var pars = urlpar...

javascript 删除 url 中指定参数,并返回 url

FungLeo's Blog

06-23

2万+

javascript 删除 url 中指定参数,并返回 url前言在之前写了一篇博文《javascript 操作 url 中 search 部分方法函数》.在这篇博文里面,我们通过写好的函数可以对url中的各种参数进行查询,设置.唯独,忘记了删除.而今天就是遇到要删除某个参数的问题.郁闷,于是,写了这个函数.实现代码// 删除url中某个参数,并跳转 function funcUrlDel(name

删除url中某个参数

a_靖的博客

11-04

1万+

这里的url 是指一个网站链接例如： https://baidu.com?a=1&b=2 下面看一下封装的代码 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.1...

js删除url参数并返回url

liusirdotnet

12-19

7287

javascript 删除 url 中指定参数,并返回 url // 删除url中某个参数,并跳转 function funcUrlDel(name){ var loca = window.location; var baseUrl = loca.origin + loca.pathname + "?"; var query = loca.search.substr(1

import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' import ElementUI from 'element-ui'; import 'element-ui/lib/theme-chalk/index.css'; Vue.use(ElementUI); //导入封装信息确认提示框组件脚本 import $myConfirm from '@/utils/my-confirm' Vue.prototype.$myConfirm = $myConfirm; //导入清空表单工具 import resetForm from '@/utils/reset-form' Vue.prototype.$resetForm = resetForm; //导入快速复制对象工具，用于数据回显 import objCopy from '@/utils/obj-copy' Vue.prototype.$objCopy = objCopy; // 全局函数及变量 import Global from './Global'; Vue.use(Global); import Axios from 'axios'; Vue.prototype.$axios = Axios; // 全局请求拦截器 Axios.interceptors.request.use( config => { return config; }, error => { // 跳转error页面 router.push({ path: "/error" }); return Promise.reject(error); } ); // 全局响应拦截器 Axios.interceptors.response.use( res => { if (res.data.code === "401") { // 401表示没有登录 // 提示没有登录 Vue.prototype.notifyError(res.data.msg); // 修改vuex的showLogin状态,显示登录组件 store.dispatch("setShowLogin", true); } if (res.data.code === "500") { // 500表示服务器异常 // 跳转error页面 router.push({ path: "/error" }); } return res; }, error => { // 跳转error页面 router.push({ path: "/error" }); return Promise.reject(error); } ); // 全局拦截器,在进入需要用户权限的页面前校验是否已经登录 router.beforeResolve((to, from, next) => { let cookie = document.cookie.match(new RegExp("(^| )"+ "XM_TOKEN" +"=([^;]*)(;|$)")); // const loginUser = store.state.user.user; // 判断路由是否设置相应校验用户权限 // console.log(to) // console.log(store) if (to.meta.requireAuth) { // console.log(loginUser) if (!cookie) { // console.log(1) // 没有登录，显示登录组件 store.dispatch("setShowLogin", true); if (from.name == null) { //此时，是在页面没有加载，直接在地址栏输入链接，进入需要登录验证的页面 next("/"); return; } // 终止导航 next(false); return; } } next(); }); // 相对时间过滤器,把时间戳转换成时间 // 格式: 2020-02-25 21:43:23 Vue.filter('dateFormat', (dataStr) => { var time = new Date(dataStr); function timeAdd0 (str) { if (str < 10) { str = '0' + str; } return str; } var y = time.getFullYear(); var m = time.getMonth() + 1; var d = time.getDate(); var h = time.getHours(); var mm = time.getMinutes(); var s = time.getSeconds(); return y + '-' + timeAdd0(m) + '-' + timeAdd0(d) + ' ' + timeAdd0(h) + ':' + timeAdd0(mm) + ':' + timeAdd0(s); }); //全局组件 import MyMenu from './components/MyMenu'; Vue.component(MyMenu.name, MyMenu); import MyList from './components/MyList'; Vue.component(MyList.name, MyList); import MyLogin from './components/MyLogin'; Vue.component(MyLogin.name, MyLogin); import MyRegister from './components/MyRegister'; Vue.component(MyRegister.name, MyRegister); Vue.config.productionTip = false; new Vue({ router, store, render: h => h(App) }).$mount('#app')