ssr-pagination

基于vue的可用于服务端渲染利于SEO的分页组件，同ElementUI的分页组件功能相似，适用于nuxt和vue项目。ElementUI的分页组件功能很全，但不适用于既是服务端渲染又对seo要求高的项目。此组件对seo做了额外处理，把分页链接都暴露给爬虫，利于seo。也可在vue单页应用中使用

demo

demo page

npm

  $ npm install ssr-pagination -S

use

  nuxt项目使用
  // page.js
  import Vue from 'vue';
  import Pagination from 'ssr-pagination'
  Vue.use(Pagination)
  
  // nuxt.config.js
  plugins: [
    { src: '~/plugins/page', ssr: false }
  ],
  
  vue项目使用
  import Pagination from 'ssr-pagination'
  Vue.use(Pagination)
  
  // list.vue
  <template>
    <div>
      <Pagination 
       :pageCount="totalPage"
       :currentPage="currentPage"
       @changePager="changePager"
      />
    </div>
  </template>

参数介绍

  total: 总页数
  pageSize: 每一页个数，默认为10
  pagerCount: 页码按钮的数量, 默认7，只取从5到21之间的奇数，如果传入5到21之间的偶数，自动减1
  currentPage: 当前页码
  pageCount: 总页数，total和pageCount只需传入其中一个值就可以
  linkPath: 分页页码前的路径，可以为空，eg：/p1,/p-1,/page1,/page-1中1前面的部分，默认为/page
  firstLink: 第一页时的路由链接，在ssr下有时需要第一页不显示分页路径，第二页才开始显示，如第一页：www.xxx.xx.com/list，第二页www.xxx.xx.com/list/page2，可不传，默认与link参数一致
  link: 其他页的路由链接，默认为空，如传'list'，结合linkPath，渲染的路由如：www.xxx.xx.com/list/page2
  useALink: 是否需要改为使用a标签跳转，默认使用nuxt-link单页跳转
  ssr: 是否使用ssr渲染模式，默认为true，服务端渲染使用nuxt-link跳转，为false时使用span通过事件传递出去处理，为true时通过useALink传true也可以改为使用a标签跳转
  confirmBtn: 是否显示确认跳转按钮，默认不显示
  
  如果样式不满足条件可以自行修改

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

For detailed explanation on how things work, consult the docs for vue-loader.