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

 更新时间:2022年09月23日 08:48:18   作者:who_become_gods  
这篇文章主要介绍了vue如何实现清空this.$route.query的值,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

如何清空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’换成{}就可以。 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。 

相关文章

  • vue项目中使用百度地图的方法

    vue项目中使用百度地图的方法

    这篇文章主要介绍了在vue项目中使用百度地图的方法,本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴借鉴价值,需要的朋友可以参考下
    2018-06-06
  • Vue.extend 登录注册模态框的实现

    Vue.extend 登录注册模态框的实现

    这篇文章主要介绍了Vue.extend 登录注册模态框的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-12-12
  • 详解Vue.js中引入图片路径的几种方式

    详解Vue.js中引入图片路径的几种方式

    这篇文章主要介绍了Vue.js中引入图片路径的几种方式,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-06-06
  • 如何手写一个简易的 Vuex

    如何手写一个简易的 Vuex

    这篇文章主要介绍了如何手写一个简易的 Vuex,帮助大家更好的理解和学习vue,感兴趣的朋友可以了解下
    2020-10-10
  • el-select单选时选择后输入框的is-focus状态并没有取消问题解决

    el-select单选时选择后输入框的is-focus状态并没有取消问题解决

    这篇文章主要给大家介绍了关于el-select单选时选择后输入框的is-focus状态并没有取消问题的解决过程,文中通过图文以及代码示例将解决的办法介绍的非常详细,需要的朋友可以参考下
    2024-01-01
  • vue bus全局事件中心简单Demo详解

    vue bus全局事件中心简单Demo详解

    ue-bus 提供了一个全局事件中心,并将其注入每一个组件,你可以像使用内置事件流一样方便的使用全局事件。这篇文章给大家介绍了vue bus全局事件中心简单Demo,需要的朋友参考下吧
    2018-02-02
  • 使用Vue中 v-for循环列表控制按钮隐藏显示功能

    使用Vue中 v-for循环列表控制按钮隐藏显示功能

    这篇文章主要介绍了使用Vue中 v-for循环列表控制按钮隐藏显示功能,需要的朋友可以参考下
    2019-04-04
  • VuePress 侧边栏的具体使用

    VuePress 侧边栏的具体使用

    本文主要介绍了VuePress 侧边栏的具体使用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-06-06
  • 使用Vue实现瀑布流的示例代码

    使用Vue实现瀑布流的示例代码

    这篇文章主要为大家详细介绍了如何使用Vue实现瀑布流,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下
    2024-02-02
  • vue+Echart实现立体柱状图

    vue+Echart实现立体柱状图

    这篇文章主要为大家详细介绍了vue+Echart实现立体柱状图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-04-04

最新评论