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路由跳转router-link清除历史记录的三种方式(总结)
这篇文章主要介绍了vue路由跳转router-link清除历史记录的三种方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了jenkins自动构建发布vue项目的方法步骤，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2021-01-01
这篇文章主要介绍了vue mixins合并策略以及应用场景,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
这篇文章主要介绍了vue配置启动项目自动打开浏览器方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
这篇文章主要介绍了vue中实现点击变成全屏及缩放功能,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-08-08
本文主要介绍了element input输入框自动获取焦点的实现，文中通过示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了Vue路由vue-router详细讲解指南，对vue-router感兴趣的同学，可以参考下2021-04-04
这篇文章主要介绍了使用vue导出excel遇到的坑及解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
Vue实现Hover功能(mouseover与mouseenter的区别及说明)
这篇文章主要介绍了Vue实现Hover功能(mouseover与mouseenter的区别及说明)，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了vue3 表单搜索内容回显到地址栏的实例代码,地址栏输入内容回显到form表单,同理表单输入内容也要回显到地址栏中,本文结合实例代码介绍的非常详细,需要的朋友可以参考下2023-09-09
最新评论