当前位置: 首页 > news >正文

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

写vue项目时,如果想通过路由的query配置项把参数从一个组件传到另一个组件,但是又不希望?id=xxx显示在地址栏(如:http://localhost:8080/test?id=xxx的?id=xxx),该怎么做:

举一个案例:

把Movies.vue的hello参数传到Cinemas.vue

在Movies.vue写:

 this.$router.push({name: 'cinemas',query: {hello: 'vue'}
})

在Cinemas.vue写:

解决方案一:清空query的值

created() {console.log("this.$route--->", this.$route);// 方式一:清空query的值this.$router.push({ query: {} });
}

解决方案二:跳转路由时不带query参数

created() {console.log("this.$route--->", this.$route);// 方式二:跳转路由时不带query参数this.$router.push(this.$route.path);
}

最终页面效果如下所示。可以看到,路径没有显示成http://localhost:8080/cinemas?hello=vue,而是显示成http://localhost:8080/cinemas,这就是我们要的效果。

⚠️但这又会产生一个问题,如果是移动端项目还好,如果是pc端项目,当用户点击浏览器地址栏旁的返回箭头时,第一次点击会显示http://localhost:8080/cinemas?hello=vue这个路径,第二次点击才显示回Movies.vue,很明显,这又不是我们想要的效果,我们想要的效果是第一次点击就显示回Movies.vue。

解决方案:当触发popState事件时,跳转到Movies.vue,问题解决。

 created() {this.$router.push(this.$route.path);// 当history对象发生变化时,就会触发popState事件window.addEventListener("popstate", () => {this.$router.push('/movies');});}

相关文章:

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

写vue项目时,如果想通过路由的query配置项把参数从一个组件传到另一个组件,但是又不希望?idxxx显示在地址栏(如:http://localhost:8080/test?idxxx的?idxxx),该怎么做: 举一个案例&#xff1…...

Redis-列表(List)

Redis列表(List) 介绍 单键多值Redis 列表是简单的字符串列表,按照插入顺序排序。你可以添加一个元素到列表的头部(左边)或者尾部(右边)它的底层实际是个双向链表,对两端的操作性能很高,通过索…...

ripro主题修改教程-首页搜索框美化教程

先看效果图: 我们来看怎么实现: 1、找到wp-content/themes/ripro/assets/css/diy.css并将下面的内容整体复制进去并保存 /*首页搜索框*/ .bgcolor-fff {background-color: #fff; } .row,.navbar .menu-item-mega>.sub-menu{margin-left:-10px;margin-right:-10px;} .home…...

写作业用白光还是暖光?盘点色温4000K的护眼台灯

台灯的白光或者暖光指的是台灯的色温,低色温的光线看起来发黄发红,高色温的光线发白发蓝。 如果灯光的光源是高品质光源,本身没有蓝光问题,那么色温的选择对护眼的影响是比较少的,更多的是对人学习工作状态&#xff0c…...

Java时间类(一)-- SimpleDateFormat类

目录 1. SimpleDateFormat的构造方法: 时间模式字母: 2. SimpleDateFormat的常用方法: “工欲善其事,必先利其器”。学习时间类之前,需要先学习SimpleDateFormat类。 java.text.SimpleDateFormat类是以与语言环境有关的方式来格式...

07 Kubernetes 网络与服务管理

课件 Kubernetes Service是一个抽象层,用于定义一组Pod的访问方式和访问策略,其作用是将一组Pod封装成一个服务,提供一个稳定的虚拟IP地址和端口号,以便于其他应用程序或服务进行访问。 以下是Kubernetes Service YAML配置文件的…...

并发编程之Atomic原子操作类

基本类型:AtomicInteger、AtomicBoolean、AtomicLong 引用类型:AtomicReference、AtomicMarkableReference、AtomicStampedReference 数组类型:AtomicIntegerArray、AtomicLongArray、AtomicReferenceArray 对象属性原子修改器&#xff1a…...

管家婆辉煌Ⅱ 13.32版安装方法

因管家婆辉煌版已经长期不更新,现已经出现蓝屏的问题,故此新开此贴,慢慢更新安装方法。 首先管家婆下载地址:http://www.grasp.com.cn/download.aspx?id116 先安装sql server 2008 下载后,运行安装,请注…...

常见的接口优化技巧思路

一、背景 针对老项目,去年做了许多降本增效的事情,其中发现最多的就是接口耗时过长的问题,就集中搞了一次接口性能优化。本文将给小伙伴们分享一下接口优化的通用方案。 二、接口优化方案总结 1.批处理 批量思想:批量操作数据…...

【Java EE】-使用Fiddler抓包以及HTTP的报文格式

作者:学Java的冬瓜 博客主页:☀冬瓜的主页🌙 专栏:【JavaEE】 分享: 在满园弥漫的沉静的光芒之前,一个人更容易看到时间,并看到自己的身影。——史铁生《我与地坛》 主要内容:使用FIddler抓包的…...

Java异步编程

Java异步编程 1、什么是java异步编程2、异步编程有什么作用3、异步编程常用于哪些业务4、异步编程的方式5、Async异步调用Async简介 1、什么是java异步编程 Java异步编程是一种处理并发问题的技术,它可以在执行耗时操作的同时,不阻塞主线程,…...

C++类与对象(二)——构造函数与析构函数

文章目录 一.类的默认6个成员函数二.构造函数1.引例2.构造函数的概念及特性 三.析构函数😋析构函数的特性 前言: 上篇文章初步认识了类以及类的相关知识,本篇将继续深入学习类与对象——类的默认6个成员函数: 一.类的默认6个成员函…...

c++标准模板(STL)(std::array)(四)

定义于头文件 <array> template< class T, std::size_t N > struct array;(C11 起) std::array 是封装固定大小数组的容器。 此容器是一个聚合类型&#xff0c;其语义等同于保有一个 C 风格数组 T[N] 作为其唯一非静态数据成员的结构体。不同于 C 风格数…...

vue3计算属性

计算属性 模板中的表达式虽然方便&#xff0c;但也只能用来做简单的操作。如果在模板中写太多逻辑&#xff0c;会让模板变得臃肿&#xff0c;难以维护。推荐使用计算属性来描述依赖响应式状态的复杂逻辑 基础示例 不够好的示例 模板中使用了表达式&#xff0c;不够直观&…...

Java 中的访问修饰符有哪些(九)

Java 中的访问修饰符用于限制类、接口、字段和方法的访问范围&#xff0c;它们分别表示不同的访问控制级别。Java 中共有四种访问修饰符&#xff1a;public、protected、default 和 private。 public public 是最开放的访问修饰符&#xff0c;用于指定公共访问级别。被 publi…...

HR员工管理的三重境界:管事、管人、管心

在一个公司里&#xff0c;员工来来往往是常态&#xff0c;虽说我们不能替他们决定&#xff0c;但是一定是与公司的管理者有一定的关系。马云曾经说过&#xff1a;“一个员工离职&#xff0c;不外乎两种原因&#xff0c;一是钱没给到位&#xff1b;二是心里委屈了”。一句话就是…...

延迟队列与SpringBoot实战

延迟队列与SpringBoot实战 概念 延时队列,队列内部是有序的&#xff0c;最重要的特性就体现在它的延时属性上&#xff0c;延时队列中的元素是希望在指定时间到了以后或之前取出和处理&#xff0c;简单来说&#xff0c;延时队列就是用来存放需要在指定时间被处理的元素的队列 …...

【算法】九键输入法

题目&#xff1a; 输入数字字符串, 输出这串字符对应的九键输入法有可能出现的所有情况 算法&#xff1a; 定义了一个全局变量 g_numStr&#xff0c;其中存储了每个数字对应的字母。定义了一个递归函数 str_combine&#xff0c;用于将每个数字对应的字母进行组合。str_combin…...

jvm之类加载器

写在前面 当我们通过javac命令将java源代码编译为Java字节码后&#xff0c;必须通过类加载器将其加载到jvm中才能运行&#xff0c;所以类加载器是jvm中非常重要的一个组成部分&#xff0c;本文我们就一起来看下吧&#xff01; 1&#xff1a;类的生命周期 类的生命周期如下图…...

Chapter4:频率响应法(上)

第四章:频率响应法 Exercise4.1 已知微分网络和积分网络电路图如下图所示,求网络的频率特性。 解: 【图 ( a ) ({\rm a}) (a)微分网络】 由微分网络电路图可得:...

接地系统安装怎么做才靠谱?从施工流程、质量验收到常见误区

在建筑电气、工业厂房、机电安装、弱电机房、消防系统和防雷系统中&#xff0c;接地系统安装都是绕不开的基础工作。它不像配电柜、桥架、灯具那样“看得见、拍得出”&#xff0c;但它一旦做不好&#xff0c;轻则设备故障、信号干扰、漏电保护误动作&#xff0c;重则引发触电风…...

别再死磕EKF了!用ESKF搞定无人机姿态估计,避开‘大数吃小数’的坑

无人机姿态估计实战&#xff1a;用ESKF避开EKF的数值陷阱 四轴飞行器在高速翻滚时&#xff0c;IMU数据突然出现剧烈抖动——这是去年调试自主无人机时遇到的真实场景。当时使用传统EKF算法&#xff0c;姿态解算在极端机动下频繁发散&#xff0c;直到切换到误差状态卡尔曼滤波&a…...

HY-Motion 1.0在元宇宙中的应用:虚拟世界角色动画生成

HY-Motion 1.0在元宇宙中的应用&#xff1a;虚拟世界角色动画生成 1. 元宇宙里&#xff0c;角色为什么需要“活”起来 打开一个元宇宙应用&#xff0c;你看到的可能是一个精致的虚拟空间&#xff0c;但真正让人愿意停留的&#xff0c;从来不是静态的场景&#xff0c;而是能动…...

OpenClaw学术研究助手:Qwen3-32B驱动的论文摘要与笔记整理

OpenClaw学术研究助手&#xff1a;Qwen3-32B驱动的论文摘要与笔记整理 1. 为什么需要本地化的AI研究助手&#xff1f; 去年冬天&#xff0c;我在整理一个跨学科研究项目的文献时陷入了困境。手头堆积了200多篇PDF论文&#xff0c;每篇都需要提取核心观点、记录关键数据&#…...

Python AI用例生成效率实战手册(企业级自动化工作流全拆解)

第一章&#xff1a;Python AI用例生成效率的核心价值与企业级定位在AI工程化落地加速的当下&#xff0c;Python凭借其丰富的生态&#xff08;如LangChain、LlamaIndex、transformers、scikit-learn&#xff09;和低门槛的可编程性&#xff0c;已成为企业构建AI用例生成流水线的…...

解决插件管理痛点:Scarab的智能高效管理方案

解决插件管理痛点&#xff1a;Scarab的智能高效管理方案 【免费下载链接】Scarab An installer for Hollow Knight mods written in Avalonia. 项目地址: https://gitcode.com/gh_mirrors/sc/Scarab 你是否曾为部署一个心仪的游戏插件而耗费整个下午&#xff1f;好不容易…...

如何用VarifocalNet提升目标检测性能?从FCOS到VFNet的实战解析

从FCOS到VFNet&#xff1a;实战解析VarifocalNet如何突破目标检测性能瓶颈 目标检测领域近年来涌现出大量创新算法&#xff0c;但性能提升逐渐进入平台期。传统方法如FCOS虽然简洁高效&#xff0c;但在处理密集物体和复杂场景时仍存在明显局限。本文将深入剖析VarifocalNet(VFN…...

内容解锁工具:突破付费墙限制的开源解决方案

内容解锁工具&#xff1a;突破付费墙限制的开源解决方案 【免费下载链接】bypass-paywalls-chrome-clean 项目地址: https://gitcode.com/GitHub_Trending/by/bypass-paywalls-chrome-clean 在信息爆炸的数字时代&#xff0c;优质内容常被付费墙阻隔&#xff0c;形成信…...

SEO_网站排名不上去?试试这几个SEO解决办法

SEO&#xff1a;网站排名不上去&#xff1f;试试这几个SEO解决办法 如果你发现自己的网站在百度上的排名一直不上去&#xff0c;你可能正面临着一场SEO战争。SEO&#xff0c;全称搜索引擎优化&#xff0c;是提高网站在搜索引擎结果中排名的关键技术。本文将为你详细探讨一些常见…...

VideoAgentTrek-ScreenFilter快速部署:基于Docker与ComfyUI的可视化工作流搭建

VideoAgentTrek-ScreenFilter快速部署&#xff1a;基于Docker与ComfyUI的可视化工作流搭建 你是不是也对那些能自动处理视频、实现智能过滤的AI模型感到好奇&#xff0c;但又觉得命令行操作太复杂&#xff0c;参数调整像在猜谜&#xff1f;别担心&#xff0c;今天我们就来聊聊…...