vue使用路由的query配置项时清除地址栏的参数案例详解
更新时间：2023年09月19日 10:38:01 作者：EchoLiner
这篇文章主要介绍了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使用路由的query配置项时如何清除地址栏的参数的文章就介绍到这了,更多相关vue清除地址栏的参数内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
相关文章
这篇文章主要介绍了Vue微信项目按需授权登录策略实践思路详解,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2018-05-05
element中el-table中的el-input校验的实现
本文主要介绍了element中el-table中的el-input校验的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-08-08
这篇文章主要介绍了安装vue3开发者工具但控制台没有显示出vue选项的解决方案，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
这篇文章主要介绍了浅谈Vue.use到底是什么鬼，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-01-01
这篇文章主要介绍了vuex中遇到的坑,vuex数据改变,组件中页面不渲染操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11
这篇文章主要介绍了Vue的组件,本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2021-10-10
本文主要介绍了Nginx部署Vue.js前端项目指南,帮助您实现从开发到线上部署的平滑过渡,确保用户能够获得最佳的访问体验,感兴趣的可以了解一下2024-09-09
这篇文章主要介绍了Vue实现剪贴板复制功能,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下2019-12-12
Vue通过异步队列批量处理数据变化与DOM更新,减少性能损耗；使用$nextTick获取更新后的DOM；异步请求需处理加载状态；生命周期钩子内可包含异步操作；核心原理为依赖收集→去重→微任务延迟→批量更新,确保高效响应2025-08-08
路由传参主要有两种方式一种是路径传参一种是参数传递,本文结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-11-11
最新评论