Vue SSR Pagination

根据页码生成 a 标签 使得浏览器可以抓取 a 链接 用于需要 SEO 分页插件，例结合nuxtjs使用 支持 查询参数模式 及 动态路由模式

查询参数模式

动态路由模式

DEMO

https://yokochen222.github.io/vue-ssr-pagination/

Props

| name | type | default | desc | | -------- | ----- | ---- | ---- | | total | Number | 0 | 总数据条数 | | pageSize | Number | 10 | 每页条数 | | currentPage | Number | 1 | 当前页码 | | pathPrefix | String | '/' | 生成路由前缀 | | pageQueryName | String | 'page' | 查询参数名称 ⚠️：queryMode 为 2 时生效 | | queryMode | Number | 1 | 1 动态路由模式, 2 查询参数模式 | | pagerCount | Number | 5 | 大于等于 5 且小于等于 21 的奇数 | | layout | String| 'prev, pager, next, jumper, ->, total' | 组件布局，子组件名用逗号分隔 | | prevBtnClassName | String | - | 上一页按钮类名 | | prevBtnText | String | - | 上一页按钮文本 | | nextBtnClassName | String | - | 下一页按钮类名 | | nextBtnText | String | - | 下一页按钮文本 | | background | Boolean | false | 是否为分页按钮添加背景色 | | small | Boolean | false | 是否使用小型分页样式 |

Usege

1、局部注册

<script setup lang="ts">
import YoPagination from './packages/Pagination.vue'
import { reactive } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const query = reactive({
    total: 100,
    page: 1,
})
const handleChangePage = (e: { path: string; page: number }) => {
    router.push(e.path)
}
</script>

<template>
    <YoPagination
        @current-change="handleChangePage"
        :total="100"
        :query-mode="2"
        page-query-name="page"
        path-prefix="/pages/number?t=12"
        v-model:current-page="query.page"
    />
</template>

<style></style>

2、全局注册

  import App from './App.vue'
  import YoPagination from './packages/index'
  import { createApp } from 'vue'

  const app = createApp(App)

  app.use(YoPagination)
  
  app.mount('#app')