返回顶部
首页 > 资讯 > 前端开发 > JavaScript >vue如何实现清空this.$route.query的值
  • 696
分享到

vue如何实现清空this.$route.query的值

2024-04-02 19:04:59 696人浏览 独家记忆
摘要

目录如何清空this.$route.query的值mounteddestroyed改变this.$route.query中的数据如何清空this.$route.query的值 mou

如何清空this.$route.query的值

mounted

定义一个 localStorage 来判断当前是否是query携带参数进来页面的

//如果有当前localStorage isTest 则 清空query
 if(localStorage.getItem('isTest')){
     this.$router.push({ query: {} })
 }
//
 if(this.$route && this.$route.query && this.$route.query.id){
     //定义一个 localStorage isTest
     localStorage.setItem('isTest', true)
     // 这里处理携带进来的参数
 }

destroyed

destroyed() {
   localStorage.removeItem('isTest')
}

改变this.$route.query中的数据

某些特定情况下想改变this.$route.query中的数据(就是地址栏中的参数),是不能通过直接赋值来改变的,我目前知道的一个办法是下载webpack-merge依赖包实现:

下载:

npm i WEBpack-merge

引入:

import merge from 'webpack-merge';

修改:

this.$router.push({
    query:merge(this.$route.query,{'id':'630'})
})

如果id本来存在的话就是修改id的值,不存在的话就会添加id这个属性,如果想替换所有的属性只要把’id’换成{}就可以。 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持编程网。 

--结束END--

本文标题: vue如何实现清空this.$route.query的值

本文链接: https://lsjlt.com/news/168242.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

猜你喜欢
  • vue如何实现清空this.$route.query的值
    目录如何清空this.$route.query的值mounteddestroyed改变this.$route.query中的数据如何清空this.$route.query的值 mou...
    99+
    2024-04-02
  • js如何清空input file的值
    目录js清空input file的值分析了原因方案一方案二纯js清空input File总结js清空input file的值 在做选择本地图片上传的功能时遇到一个问题,第一次点fil...
    99+
    2023-01-28
    js清空input file的值 js清空input file js input file的值
  • Vue如何清空对象
    目录Vue清空对象JS清空对象Vue清空对象某一个对象清空vule值,保留key在vue中Vue清空对象 JS清空对象 使用字面量方法指向一个新的对象: var obj = {   ...
    99+
    2024-04-02
  • vue如何清空数组
    小编给大家分享一下vue如何清空数组,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!1. 前言前两天在工作当中遇到一个问题,在vue3中使用reactive生成的响...
    99+
    2023-06-22
  • XamarinEssentials中如何清空键值
    这篇文章主要介绍了XamarinEssentials中如何清空键值,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。Preferences类的Clear()方法可以清空所有的键和...
    99+
    2023-06-05
  • redis如何实现清空缓存
    目录redis如何清空缓存正文Redis缓存问题如何清空我的是免安装版的redisredis如何清空缓存 如果你们的项目用到redis啦,虽然设置了过期时间,但有时候修改bug,仍然需要及时清空缓存,去读数据库的数据,所...
    99+
    2024-04-02
  • C#实现一键清空控件值的示例代码
    目录场景需求开发环境开发工具实现代码实现效果代码解析场景 在任何一个Form表单的操作页面或者数据台账的查询页面,基本都会看到一个清除的按钮,其功能就是用来清除我们需要抛弃的已经写入...
    99+
    2024-04-02
  • Vue如何用this.$set改变数组里的某个值
    Vue用this.$set改变数组里的某个值 <!DOCTYPE html> <html lang="en"> <head> <...
    99+
    2022-12-19
    Vue this.$set改变数组某个值 vue中this.$set()的用法 vue中this.$set()
  • Android中如何实现清空搜索框的文字
    需求:项目中的有关搜索的地方,加上清空文字的功能,目的是为了增加用户体验,使用户删除文本更加快捷 解决过程:开始的时候感觉这个东西不太好实现,主要就是布局的问题,可能是开始顾虑...
    99+
    2022-06-06
    Android
  • vue中如何使用this.$router.push()实现跳转页面
    这篇文章主要介绍了vue中如何使用this.$router.push()实现跳转页面,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。this....
    99+
    2024-04-02
  • vue中如何使用this.$router.go(n) 实现跳转页面
    这篇文章主要介绍了vue中如何使用this.$router.go(n) 实现跳转页面,具有一定借鉴价值,感兴趣的朋友可以参考下,希望大家阅读完这篇文章之后大有收获,下面让小编带着大家一起了解一下。this....
    99+
    2024-04-02
  • vue如何实现父子组件传值
    小编给大家分享一下vue如何实现父子组件传值,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获,下面让我们一起去了解一下吧!父子组件传值<!DOCTYPE&...
    99+
    2024-04-02
  • Vue祖孙组件如何实现传值
    目录先看基础$props$attrs$listeners祖传孙1. $props 链2. $attrs孙传祖$listeners总结先看基础 祖孙组件,也就是 3 层嵌套的组件。关于...
    99+
    2023-03-24
    Vue祖孙组件 Vue传值 Vue组件
  • layui如何实现清空和重置表单数据
    这篇文章给大家分享的是有关layui如何实现清空和重置表单数据的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。最近在使用layui框架,在页面进行表单数据提交后,要是页面表单数据清...
    99+
    2024-04-02
  • 如何获取this.$store.dispatch的返回值
    目录获取this.$store.dispatch的返回值Action调用根据vuex的this.$store.dispatch()返回值处理逻辑App.vuevuex/store/a...
    99+
    2023-01-10
    this.$store.dispatch this.$store.dispatch返回值 获取this.$store.dispatch返回值
  • vue中this.$message的实现过程详解
    目录一、vue中为什么可以直接使用this.$message二、message组件的内部实现原理三、总结一、vue中为什么可以直接使用this.$message 1、Message在...
    99+
    2023-05-18
    vue中this.$message实现过程 vue中this.$message实现 vue this.$message
  • mysql实现清空缓存的方法
    小编给大家分享一下mysql实现清空缓存的方法,希望大家阅读完这篇文章后大所收获,下面让我们一起去探讨吧!mysql清空缓存的方法:使用FLUSH句法来清除缓存,为了执行FLUSH,必须有reload权限,...
    99+
    2024-04-02
  • element-ui表单提交自动清空隐藏表单值实现
    目录需求的开始初步思路:标记方案有别的超简单的方案?继续标记方案分析如何实现具体如何实现在表单项组件添加显隐逻辑事件结尾 需求的开始 一个表单,里面有很多表单项,然后需求通过特定的条...
    99+
    2024-04-02
  • Vue中如何实现父子组件传值
    Vue中如何实现父子组件传值,相信很多没有经验的人对此束手无策,为此本文总结了问题出现的原因和解决方法,通过这篇文章希望你能解决这个问题。(一)传递数值1.子组件:Header.vue<templat...
    99+
    2024-04-02
  • Vue中父子组件如何实现传值
    目录前言一、将子组件引入父组件二、父组件如何传值给子组件三、子组件如何接收父组件传过来的值并使用(props)四、子组件如何传值给父组件($emit)五、父组件使用子组件传过来的值总...
    99+
    2023-01-28
    Vue父子组件 Vue组件传值 Vue父子组件传值
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作