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,这就是我们要的效果。文章来源地址https://www.toymoban.com/news/detail-575044.html

vue 删除query参数,vue.js,前端,javascript,前端框架,ecmascript,Powered by 金山文档

到了这里,关于vue使用路由的query配置项时如何清除地址栏的参数的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 小米路由器4A千兆版如何刷OpenWRT并使用固定地址远程访问

    OpenWRT是一个高度模块化、高度自动化的嵌入式Linux系统,可以让路由器变得更智能,简单的说,路由器刷了OpenWrt就相当于一个Linux系统带无线带多网卡的电脑。 举个栗子:有usb功能的路由器刷后可以实现多端文件共享 ,挂站,远程监控甚至智能家居 ;无线可桥接,可以无线

    2024年02月04日
    浏览(53)
  • Vue如何创建一个新页面以及相关路由配置详解

    前些天发现了一个巨牛的人工智能学习网站,通俗易懂,风趣幽默,忍不住分享一下给大家。【宝藏入口】。 在Vue.js中,路由配置是通过使用Vue Router来完成的。以下是Vue路由配置的基本语法格式: 在上面的代码中,有几个重要的属性和概念: 这些路由配置会被传递给 VueR

    2024年01月22日
    浏览(40)
  • Vue中如何进行分布式路由配置与管理

    随着现代Web应用程序的复杂性不断增加,分布式路由配置和管理成为了一个重要的主题。Vue.js作为一种流行的前端框架,提供了多种方法来管理Vue应用程序的路由。本文将深入探讨在Vue中如何进行分布式路由配置与管理,并提供示例代码来帮助您实现这一功能。 在Vue中,分布

    2024年02月07日
    浏览(43)
  • 关于vue中如何清除定时器的方法

    一、问题 1、在vue中使用setTimeout定时器的时候,可能会遇到关不掉的情况,会存在明明已经在beforeDestroy和destroyed中设置了定时器清除了,但是有时候没生效,定时器还会继续执行。 2、在这里需要说一下setTimeout的使用场景: (1)需要执行一次定时的时候用得到,比如需要在

    2023年04月09日
    浏览(38)
  • 【用过激活工具或者配置过,如何清除】

    将所有jetbrains软件关闭退出 注意:如下方步骤没有对应的文件,则直接看下一步的操作即可,都没有则直接跳过此界面操作 将JetBrains这个文件夹整个删掉,不要只删除里面的一部分;用户后一级是对应你电脑主机的用户名   将JetBrains这个文件夹整个删掉,不要只删除里面的

    2024年02月05日
    浏览(30)
  • 【无标题】 Vue 路由库Router 【重点】 - 安装 - 基本使用 - 路由配置 - 路由模式 - 路由传递参数 - 路由内置对象 - 路由守卫

    Vue 路由库Router 【重点】 安装 基本使用 路由配置 路由模式 路由传递参数 路由内置对象 路由守卫 Vue的内置API 【掌握】 ref Vue.set Vue.nextTick Vue.filter Vue.component Vue.use Vue.directive 进行页面的跳转(相当于a标签),Vue是SPA单页面应用,他的页面跳转必须使用Vue-Router路由进行实现

    2024年02月06日
    浏览(48)
  • Vue3 Vue-Router详解 Vue3配置hash 和 history路由、Vue3封装的路由hook函数(useRouter,useRoute)的使用 路由懒加载、路由分包处理、魔法注释的使用

     html部分 js部分  html页面使用路由传来的参数  获取router跳转id 获取 路由跳转错误地址

    2024年02月11日
    浏览(45)
  • 中兴三层交换机如何清除配置文件操作指南

    我们都知道cisco的交换机清除配置是erase startconfig !然后reload就可以了。 但是ZXR10系列的交换机没有这个命令,ZXR10保存配置是write ,有就是把配置信息write到flash中,在flash下有个cfg文件夹,里面保存的就是我们write进去的配置文件,只要把这个文件删除,重启交换机就可以了

    2024年02月05日
    浏览(45)
  • 路由器配置方法(固定地址)

    由于学校给分配了IP地址,因此我们的路由器接入的时候不能选择自动接入方式,而要选择固定地址方式。 我们首先先将路由器接上网线,这里注意一定要接wan口 因为路由器分为两个口,wan口是入口,lan口是出口 这时候我们就可以在wifi中搜索到我们的网络,我们先连接这个

    2024年02月09日
    浏览(38)
  • 静态路由基础配置(IP地址的规划、静态路由的配置),实现全网可达。

     按照图中的拓扑设计,实现全网可达。 首先我们要了解路由器的作用及原理    路由器的作用: 不同网络间的互联 为它所承载的数据做路径的选择 --- 选路 路由器的工作原理: 当数据包进入路由器后,先查看目标IP地址,然后查询本地的路由表,若表中存在记录,将 无条

    2024年02月08日
    浏览(101)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包