Vue路由跳转传参后无法清空地址栏参数问题解决方案
Vue路由跳转传参后无法清空地址栏参数问题解决
使用的路由模式是history，通过以下方式进行跳转传参
proxy.$router.push({ path: '/performance/index', query: { name: '小明', id: '1'} })这样跳转后路由和地址栏将变成 /performance/index?name=小明&id=1
因为页面有用到路由参数，但是这样刷新的话，参数会一直携带在路由上，就会刷新了页面还会处理这些参数。
刚开始，通过proxy.$route.quey = {} ，proxy.$route.quey = null，proxy.$router.push({ path: '/performance/index'})方法尝试过，路由参数确实没了，但是地址栏上还是会携带参数，最后通过网上查阅找到了解决办法：
const path = proxy.$route.path proxy.$router.push(path)
补充：vue使用路由的query配置项时如何清除地址栏的参数
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，这就是我们要的效果。
到此这篇关于Vue路由跳转传参后无法清空地址栏参数问题解决的文章就介绍到这了,更多相关Vue路由跳转传参内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了vue+element项目中过滤输入框特殊字符小结，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下2019-08-08
Vue3 echarts组件化及使用hook进行resize方式
这篇文章主要介绍了Vue3 echarts组件化及使用hook进行resize方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-04-04
本文主要介绍了nuxt.js框架使用小结,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2023-08-08
keep-Alive搭配vue-router实现缓存页面效果的示例代码
这篇文章主要介绍了keep-Alive搭配vue-router实现缓存页面效果,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2020-06-06
这篇文章主要介绍了vue cli 3.0通用打包配置代码,不分一二级目录，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-09-09
Vue+Typescript中在Vue上挂载axios使用时报错问题
这篇文章主要介绍了Vue+Typescript中在Vue上挂载axios使用时报错问题，本文给大家介绍的非常详细，具有一定的参考借鉴价值 ,需要的朋友可以参考下2019-08-08
在Vue3中,toRaw方法允许用户获取响应式对象的原始值,有助于性能优化和与外部库集成,它通过绕过Vue的响应式系统,仅在必要时触发更新,从而提升效率,本文就来具体介绍一下,感兴趣的可以了解一下2024-09-09
在现代前端开发中,状态管理是一个不可忽视的话题,而Vuex作为Vue.js的官方状态管理库,在大型应用中扮演着至关重要的角色,当我们使用Vuex进行状态管理时,getter和mutation是两个重要的概念,在本文中,我们将详细探讨getter和mutation的区别,需要的朋友可以参考下2024-12-12
计算属性用于处理复杂的业务逻辑,vue提供了检测数据变化的一个属性watch可以通过newVal获取变化之后的值,这篇文章主要给大家介绍了关于Vue中计算属性和属性侦听的相关资料,需要的朋友可以参考下2021-10-10
最近项目上要做一个车牌识别的功能,就需要做拖动截图功能了,因为前段是vue,所以下面这篇文章主要给大家介绍了关于Vue拖动截图功能的简单实现方法,需要的朋友可以参考下2021-07-07
最新评论