vue点击删除url参数并重新加载页面

在Vue.js中，如果你想实现点击某个按钮删除URL参数后重新加载整个页面，你可以这样做：

首先，在HTML部分，添加一个删除按钮，并绑定一个事件处理器，如`@click="removeParamAndReload"`:

<button @click="removeParamAndReload">删除参数并刷新</button>
<a :href="currentUrl" target="_self"></a> <!-- 这里用v-bind:href绑定到动态生成的URL -->

然后，在你的Vue组件的script部分，定义`removeParamAndReload`方法，它会通过JavaScript操作URL，移除指定参数，再使用`$router.push()`或`window.location.reload()`来刷新页面：

export default {
  data() {
    return {
      currentUrl: this.$route.fullPath, // 获取当前完整的URL路径
    };
  },
  methods: {
    removeParamAndReload() {
      // 假设你想删除名为'id'的参数
      const idToRemove = 'id';
      let params = new URLSearchParams(window.location.search);
      params.delete(idToRemove); // 删除参数

      // 重新构建URL
      const baseUrl = window.location.pathname; // 主要路径
      const newQueryParams = params.toString(); // 参数字符串化
      this.currentUrl = `${baseUrl}?${newQueryParams}`;

      // 刷新页面或跳转到新URL（这里假设使用vue-router）
      this.$router.replace(this.currentUrl); // 使用replace防止浏览器历史记录更新
      // 或者
      // window.location.href = this.currentUrl;
    },
  },
};

注意，这个例子假设你已经在Vue项目中设置了路由，并且使用了`vue-router`。如果没有，可以考虑使用`window.location`直接修改URL。