<script setup>
const filedHeaders=[
  {key:"field",title:"属性"},
  {key:"type",title:"类型",width: '80px'},
  {key:"params",title:"参数"},
  {key:"desc",title:"描述"},
]
	
const filedData0= [
	{
		field: 'addRouteKey',
		type: 'Function',
		params: "query: String | object =>路由值  \n queryKey: String => 路由key  \n type: String(默认replace) => 路由跳转方式,默认是replace",
		desc: "给路由上添加一个参数，eg: query= 1， queryKey = detail 路由上会变成 ?detail=1；query = {detail:1,key:'2',id:'3'} 路由上会变成 ?detail=1&key=2&id=3",
	},
  {
		field: 'removeRouteKey',
		type: 'Function',
		params: "queryKey: String",
		desc: "从路由上删除一个参数", 
	},
  {
		field: 'toQuery',
		type: 'Function',
		params: "query: String | object",
		desc: "更新路由参数，且会过滤掉空值",
	},
]

 
 
</script>
# useRouteChange Hook

`useRouteChange` 是一个 路由变更的api，可以给路由添加、删除参数，过滤路由空值。

## 功能
<ClientOnly>
 <Table :data="filedData0" resizable checkType="none" type="grid">
 <TableColumn v-for="(header, index) in filedHeaders" :key="header.key"  :title="header.title" />
 </Table>
</ClientOnly>


## 使用方法

<div class="options-api">

```vue
<script setup>
import {useRouteChange} from "@ksconsole/hooks";

const router = useRouter();
const route = useRoute();
const { addRouteKey, removeRouteKey,toQuery, } = useRouteChange(router,route)

  // 路由上添加参数 memberAdd=id
 addRouteKey('id','memberAdd')

  // 路由上删除参数 memberAdd=id
  removeRouteKey('memberAdd')

   // 更新路由参数 active=111,a是空值会被过滤
  toQuery({'active':'111',a:''})
</script>
```

</div>


