vue router实现分页
Vue Router 实现分页的方法
使用 query 参数传递页码
在路由配置中无需特殊修改，直接通过 this.$router.push 或 <router-link> 传递 query 参数：
// 跳转到第二页
this.$router.push({ path: '/list', query: { page: 2 } })模板中使用：
<router-link :to="{ path: '/list', query: { page: pageNumber } }">
第{{ pageNumber }}页
</router-link>获取当前页码：
const currentPage = this.$route.query.page || 1使用 params 参数传递页码
路由配置需要定义动态参数：
{
path: '/list/:page',
name: 'List',
component: List
}跳转时：
this.$router.push({ name: 'List', params: { page: 2 } })获取参数：
const currentPage = this.$route.params.page || 1结合分页组件实现
封装分页组件时监听路由变化：
watch: {
'$route' (to, from) {
this.fetchData(to.query.page || to.params.page || 1)
}
}保持页面状态
使用 keep-alive 缓存分页组件：
<keep-alive>
<router-view></router-view>
</keep-alive>滚动行为控制
在路由配置中添加滚动行为：
const router = new VueRouter({
scrollBehavior (to, from, savedPosition) {
if (savedPosition) {
return savedPosition
} else {
return { x: 0, y: 0 }
}
}
})分页数据获取
在组件中根据路由参数获取数据：
created() {
this.fetchData(this.$route.query.page || 1)
},
methods: {
fetchData(page) {
axios.get(`/api/data?page=${page}`).then(response => {
this.items = response.data
})
}
}注意事项
- 分页参数变化时需触发数据重新获取
- 考虑使用防抖避免频繁请求
- 路由参数需进行类型转换（字符串转数字）
- 服务端需支持分页参数处理
以上方法可根据实际项目需求组合使用，query 方式适合简单分页，params 方式适合 SEO 友好的 URL 结构。
