vue清除地址栏路由参数方式

 更新时间:2023年01月21日 08:12:56   作者:lihefei_coder  
这篇文章主要介绍了vue清除地址栏路由参数方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

vue清除地址栏路由参数

方式一:

let path = this.$route.path; //先获取路由路径
this.$router.push(path); //再跳转路由路径,query参数没带过去,所以被清除了

方式二:

this.$router.push({ query: {} });

vue删除query中个别参数或清除query

在写项目过程中涉及到一个需求,大概形容一下就是第一次进入会有一个编辑弹窗,如果点击编辑弹窗的保存按钮后,刷新页面,弹窗则不在弹出。

假设添有一个 type为open的参数

let resolves = this.$router.resolve({
  name: 'OrdersDetail',
  query: {
    orderId: this.orderId,
    channel: this.salesChannel,
    type: 'open' // 目标参数
  }
})
window.open(resolves.href, '_blank')

删除type参数

let newQuery = JSON.parse(JSON.stringify(this.$route.query)) // 先拷贝一个一模一样的对象
delete newQuery.type //再删除page
this.$router.replace({ query: newQuery }) //再把新的替换了

删除全部query参数

let path = this.$route.path //先获取路由路径
this.$router.replace(path) //再跳转路由路径,query参数没带过去,所以被清除了

或者

this.$router.replace({ query: {} });

总结

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

相关文章

  • 使用vue中的v-for遍历二维数组的方法

    使用vue中的v-for遍历二维数组的方法

    下面小编就为大家分享一篇使用vue中的v-for遍历二维数组的方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • vue实现自定义el-table穿梭框功能

    vue实现自定义el-table穿梭框功能

    这篇文章主要介绍了vue实现自定义el-table穿梭框功能,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-02-02
  • vue使用Element-UI部分组件适配移动端问题

    vue使用Element-UI部分组件适配移动端问题

    这篇文章主要介绍了vue使用Element-UI部分组件适配移动端问题,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-03-03
  • Vue之Axios的异步请求问题详解

    Vue之Axios的异步请求问题详解

    总的来说这并不是一道难题,那为什么要拿出这道题介绍?拿出这道题真正想要传达的是解题的思路,以及不断优化探寻最优解的过程。希望通过这道题能给你带来一种解题优化的思路,Axios是一个开源的可以用在浏览器端和Node JS的异步通信框架,主要作用就是实现AJAX异步通信
    2023-02-02
  • vite项目如何集成eslint和prettier

    vite项目如何集成eslint和prettier

    这篇文章主要介绍了vite项目如何集成eslint和prettier问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-01-01
  • Vue 3 中动态赋值 ref 的应用示例解析

    Vue 3 中动态赋值 ref 的应用示例解析

    Vue3引入了Composition API,其中ref是核心概念,允许开发者声明响应式状态,本文通过一个具体示例,探讨了在Vue3中如何使用ref进行动态赋值,尤其是在处理DOM相关操作时的应用,通过ref动态赋值,可以有效管理组件内的状态,提高代码的可维护性和清晰度
    2024-09-09
  • Vuex和前端缓存的整合策略详解

    Vuex和前端缓存的整合策略详解

    这篇文章主要给大家介绍了Vuex和前端缓存的整合策略的相关资料,文中介绍的非常详细,对大家具有一定的参考学习价值,需要的朋友们下面随着小编一起来看看吧。
    2017-05-05
  • Vue3纯前端实现Vue路由权限的方法详解

    Vue3纯前端实现Vue路由权限的方法详解

    这篇文章主要给大家介绍了关于Vue3纯前端实现Vue路由权限的相关资料,文中通过实例代码介绍的非常详细,对大家学习或者使用Vue3具有一定的参考学习价值,需要的朋友可以参考下
    2022-05-05
  • vue中的v-if和v-show的区别详解

    vue中的v-if和v-show的区别详解

    这篇文章主要介绍了vue中的v-if和v-show的区别详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-09-09
  • 基于Vue实现HTML转PDF并导出

    基于Vue实现HTML转PDF并导出

    这篇文章主要为大家介绍了三种方法,可以实现将HTML页面转为PDF并实现下载。文中的示例代码讲解详细,感兴趣的小伙伴可以学习一下
    2022-04-04

最新评论