vue-router清除url地址栏路由参数

Favour72

已于 2024-05-08 17:43:55 修改

阅读量3.5k

点赞数 2

分类专栏： vue.js 文章标签： vue.js javascript 前端

于 2024-04-26 18:03:35 首次发布

本文链接：https://blog.csdn.net/weixin_45904557/article/details/138225482

版权

vue.js 专栏收录该内容

13 篇文章

订阅专栏

本文介绍了在Vue应用中，如何通过点击事件从一个页面传递id到另一个页面，以及如何在刷新后清除URL地址栏中的路由参数，使用了$route.query和$router.replace方法进行操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

从一个页面通过下图的点击事件拿到一个id之后跳转到另一个页面

在另一个页面得到这个id

this.reportId = this.$route.query.reportCoreId;

在另一个页面得到这个id之后,刷新浏览器页面还是会存在在url地址栏中

然后再这样就可以清除地址栏路由参数了

    // 获取当前路由的查询参数
    const query = { ...this.$route.query };
    // 检查要删除的查询参数是否存在，如果存在则删除
    if (query.reportCoreId) {
      delete query.reportCoreId;
      // 使用 $router.replace() 方法更新路由，但不改变浏览历史
      this.$router.replace({ query });
    }