ページネーションのページ数をURLに表示させる

こんにちは、コードリックの岡田です。
今日は最近仕事の中で学んだ機能についてお話ししたいと思います。


現在弊社ではJavaScriptのフレームワークであるVue.jsを使いアプリ等を開発しています。
その中で最近自分が受け持ったタスクにこのようなものがありました。


『ページャー（ページネーション？）の現在見ているページが何枚目かをURL上に表示させよ！』というものです。
元々は付いていない機能だったんですが、SEO対策も兼ねてつけようという話になりました。
v-modelやprops、emitなどは触る機会が多かったのでわかりますが、タスクを始めた当初「うん？」という感じでどうするのか皆目見当がつきませんでした。


そして結果なのですが、調べること数時間。。。router-linkを用いることで解決しました。


router-linkには飛ばしたい次ページのURLを設定することができますが、それ以外にもqueryやparamsといった情報も追加可能です。


書き方としてはこうです。
<router-link :to={name:'',query:{page:1},params:{title:books}></router-link>


こうすることで飛ばされたページのURLには設定したqueryやparamsといった情報を持たせることができます。


また、逆にこれらqueryやparamsといった情報をURLから引っ張ってくることも可能です。


その場合には、
useRouter().currentRoute.value


とscript欄に書いてあげることでオブジェクトが返ってくるので、その中から必要な情報を指定することで取得できます。


自分はこれを利用してブラウザバックしてもページネーションにそのURLに応じてページ内容が変わる機能を作りました。


一応これらの動きはrouter.pushという書き方でもできるそうなのですが、表示される際にはaタグではなくなってしまうという欠点があったため、あえてrouter-linkを使用しました。

SEO対策にURLを生成したいけど、どうすれば。。。という方、一度お試しあれ〜。