vue3+ts路由如何删除query?

Question

<div class="home-card-items" style="border-bottom: 0px;padding:15px 15px 0px !important;border-bottom-right-radius: 0;border-bottom-left-radius: 0;">
        <el-radio-group class="radio" v-model="radio2" size="default" @change="radioChange">
          <el-radio-button label="1"/>
          <el-radio-button label="2" />
          <el-radio-button label="3" />
          <el-radio-button label="4" />
          <el-radio-button label="5" />
          <el-radio-button label="6" />
          <el-radio-button label="7" />
        </el-radio-group>
      </div>
      <div class="home-card-items" style="border-top: 0px;border-top-right-radius: 0;border-top-left-radius: 0;">
        <Suspense>
          <List v-if="radio2 === '1'"/>
          <Illegal v-else-if="radio2 === '5'"/>
          <Sensitive v-else-if="radio2 === '7'"/>
          <Tunnel v-else-if="radio2 === '2'"/>
          <Mining v-else-if="radio2 === '4'"/>
          <SensitiveApp v-else-if="radio2 === '6'"/>
          <Overseas v-else/>
        </Suspense>
      </div>

这是html代码
每个按钮页面执行的是

onBeforeMount(() => {
// 获取数据
  GetTaskAlertForeignConnData()
})

let radio2:any = ref('1')
// 从其它页面跳转到这个页面以后，从路由里面获取radio2
if(route.query.id !== undefined) {
  radio2.value = route.query.id
}
// 点击的lableb不等于route.query.id的时候，删除路由里面query,跳转到对应的页面
const radioChange = (tabs:any) => {
  if(tabs !== route.query.id) {
    console.log(route.query.id);
    radio2.value = tabs
  }
}

现在的问题是 默认是1
当我从路由里面获取到2以后，跳转到2，这个没有问题，当我点击除了2以外的其它按钮时，会跳转到默认的1里面

想要实现的效果是 如果现在跳转到2了，当我点击4的时候，删除路由里面的query信息，同时页面也跳转到4的页面

Answer 1

你可以使用 router.push 方法来实现点击按钮时删除 query 参数并跳转到对应页面。你要导入 useRouter 方法来访问路由实例。
下面是修改后的代码：

import { useRouter } from 'vue-router';

// 在 setup 函数内部
const router = useRouter();

const radioChange = (tabs: any) => {
  if (tabs !== route.query.id) {
    radio2.value = tabs;

    // 删除 query 参数并跳转
    router.push({ query: {} });
  }
};

这段代码会在点击按钮时删除所有 query 参数并跳转。如果你只想删除特定的 query 参数（例如 id），可以通过以下方式修改：

router.push({ query: { ...route.query, id: undefined } });

这将保留其它 query 参数，但会删除 id 参数。