清除页面url中携带参数的方法

情景：

做了一个页面跳转，并且打开该页面中的弹窗的需求。我的实现方法是，在目标页面，通过watch，监听 $route，也就是 监听 该页面中发生的路由变化。当跳转过来，并且携带某个参数的时候，我就去打开一个弹框。

问题是，成功的跳转过来了，但页面刷新并不会清除 路由中携带的参数。也就是 query 传参。导致 每次刷新页面 我的watch 都会触发，一刷新 页面中的弹框就会弹开：

解决方案：

方案：

由于没有找到直接清除当前页面路由参数的方法，我选择了，在关闭弹框的操作中，将当前页面的URL直接替换为没有  我传入的那个参数的URL。

        let url = new URL(window.location.href); // 通过当前页面的 URL 路径，生成URL对象
        url.searchParams.delete("noteId");         // 通过 searchParams 操作URL对象中的search参数，删除 noteId 参数（也就是我的目标参数）
        window.history.replaceState({}, "", url.href); // 替换当前历史记录中的URL，不产生浏览记录

涉及知识：

一、watch 监听 路由变化

app.vue 中引入 router配置后，路由组件中（我觉得可以理解为 this 中） 就会引入两个配置项 $route（里面存放该 页面 中的各种路由信息 的 路由对象），和 $router（对该页面进行 路由操作的 路由器），

但这里还不是这个问题，这里是我们在 入口文件  中引入 router-view 后，并注册使用后，所有的路由组件的  watch 中，就添加了   $router  路由监听器。

$router 路由监听器

当路由发生变化时，会调用这个监听器函数，并传入两个参数：to 和 from，它们分别表示目标路由和来源路由

二、window.location 的相关操作

1、window.location 获取网站的URL 信息

我们看到的页面这中的路径，是 url字符串，但实际我们打印 window.location 的时候，打印出来的是 URL 对象，我们通过URL对象 操作当前页面 路径中的参数。

2、window.history

操作浏览器的历史记录，这里我采用 replaceState 方法，替换掉历史记录栈中最上层的记录，避免了返回操作后参数继续出现的情况