vue router实现分页
Vue Router 实现分页的方法
在 Vue.js 中，可以通过 Vue Router 实现分页功能，通常需要结合路由参数和动态路由匹配。以下是几种常见的实现方式：
使用查询参数实现分页
在路由配置中，可以设置查询参数来传递页码信息。例如：
// router/index.js
const routes = [
{
path: '/items',
name: 'Items',
component: () => import('../views/Items.vue')
}
]在组件中，可以通过 this.$route.query.page 获取当前页码：
// Items.vue
export default {
computed: {
currentPage() {
return parseInt(this.$route.query.page) || 1
}
},
methods: {
goToPage(page) {
this.$router.push({ query: { ...this.$route.query, page } })
}
}
}使用动态路由实现分页
另一种方式是通过动态路由参数传递页码：
// router/index.js
const routes = [
{
path: '/items/:page',
name: 'Items',
component: () => import('../views/Items.vue'),
props: true
}
]在组件中，可以通过 props 接收页码：
// Items.vue
export default {
props: {
page: {
type: [String, Number],
default: 1
}
},
methods: {
goToPage(page) {
this.$router.push(`/items/${page}`)
}
}
}结合分页组件实现
可以结合第三方分页组件（如 vue-paginate）实现完整的分页功能：
<template>
<div>
<paginate
v-model="currentPage"
:page-count="totalPages"
:click-handler="goToPage"
/>
</div>
</template>
<script>
export default {
data() {
return {
totalPages: 10
}
},
computed: {
currentPage: {
get() {
return parseInt(this.$route.query.page) || 1
},
set(value) {
this.goToPage(value)
}
}
},
methods: {
goToPage(page) {
this.$router.push({ query: { ...this.$route.query, page } })
}
}
}
</script>注意事项
- 确保在路由变化时重新获取数据，可以通过
watch监听路由变化：
watch: {
'$route.query.page'(newPage) {
this.fetchData(newPage)
}
}-
对于 SEO 友好的分页，建议使用动态路由方式而非查询参数。
-
在服务器端渲染（SSR）应用中，需要确保分页逻辑在客户端和服务器端都能正常工作。
