vue3列表页面开发最佳实践案例

<template><pagination:total="page.filter.total":pageNo="page.filter.pageNo":pageSize="page.filter.pageSize"@changePageNo="(pageNo:number)=>go({pageNo})"@changePageSize="(pageSize:number)=>go({pageSize})"/></template><scriptlang="ts"setup>constroute=useRoute();
constrouter=useRouter();
constpage=rective<any>({
list:[],
total:0,
filter:{
pageNo: 1,
pageSize: 10,
name:''  }
})
watch(route,()=>{
// 监听路由变化getList()
});
onMounted(()=>{
getList()
})
asyncfunctiongetList(){
try{
/*       这里是为了合并路由上的参数与filter的已有参数      放在这个位置, 是因为 onMounted 和 RouteChange 时都要执行这个函数, 放这里就不用写重复代码了    */page.filter=Object.keys(route.query).reduce((current,next)=>{
// 只覆盖不为undefined或者null的属性值if(route.query[next] !==undefined&&route.query[next] !==null){
current[next] =route.query[key] 
        }
returncurrent    }, page.filter)
constres=http.get(url,{
params:page.filter    }
// 这里假设你的数据是没问题的page.list=res.data.list;
page.tota=res.data.total;
  }catch(error:any){
console.log(error) 
  }
}
functiongo(condation:{}){
router.push({
name: route.name,
query:{
// .. 把传递进来的新参数与旧参数合并传递给下一页...route.query,
...condation    }
  })
)