search

quasarframework / quasar

Quasar Framework - Build high-performance VueJS user interfaces in record time
https://quasar.dev
MIT License
25.89k stars 3.51k forks source link

QPagination with anchor tag for SEO purpose #5325

Closed dodohack closed 5 years ago

dodohack commented 5 years ago

QPagination is a great component with rich features, I have used it for my desktop version website for paged list.

It works as expected from the view of a user, however, when you want your next pages to be indexed by search engine, you will there is no way to make QPagination to display paginations as <a href="/product-list?page=2">Page 2</a>

So for SSR rendered content, search engine will not be able to crawl subsequent pages as there is no anchor links present.

I think QPagination can render into anchor links instead of buttons to achieve this.

dodohack commented 5 years ago

Has implemented a quick version by modifying QPagination.js by adding code: to: { query: Object.assign({}, this.$route.query, { page: i }) }, when calling this.__getBtn function, full code below:

for (let i = pgFrom; i <= pgTo; i++) { const active = i === this.value contentMiddle.push(this.__getBtn(h, { key: bpg${i}, style, on: { click: () => this.set(i) } }, { disable: this.disable, flat: !active, textColor: active ? this.textColor : null, label: i, to: { query: Object.assign({}, this.$route.query, { page: i }) }, ripple: false })) }

rstoenescu commented 5 years ago

Prop to-fn will be available in "quasar" v1.2.6.