質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

ただいまの
回答率

90.01%

vue-routerのページネーションについて

解決済

回答 1

投稿

  • 評価
  • クリップ 1
  • VIEW 2,154

supermaruetsu

score 112

現在LaravelとVueJSでアプリを作成中です。
LaravelのPaginationを使い、ページングのメタ情報を含めてレスポンスを返すようコードを書いています。

*現状*
・Example.vueが呼ばれた際、見た目上のURIが「http://..../example」(vue-routerのURIが優先される)

*やりたいこと*
URIを「http://..../example?page=...」となるようコーディング

const router = new VueRouter({
    mode: 'history',
    routes: [
        { path: '/', name: 'home', component: Index},
        { path: '/example/', name: 'example', component: Example},
    ]
})

export default router
// Example.vue

<template>
  ...
</template>

<script>
import { get } from '../connectio/api'

export default {
    data() {
        return {
            data : [],
            counter: 0,
            pagination: {
                total: 0,
                per_page: 8,
                from: 1,
                to: 0,
                current_page: 1
            },
            offset: 2,
        }
    },
    mounted : function() {
        this.getPage(this.pagination.current_page);
    },
    methods: {
        getPage(page) {
            get(`/api/example?page=` + page)
                .then((res) => {
                    this.pagination = res;
                    this.data = res.data;
                })
                .catch((err) => {
                    // error
                })

        },
    }
}
</script>

追加の必要情報等ありましたら、お手数ですがコメントいただければと思います。
よろしくお願いいたします。

  • 気になる質問をクリップする

    クリップした質問は、後からいつでもマイページで確認できます。

    またクリップした質問に回答があった際、通知やメールを受け取ることができます。

    クリップを取り消します

  • 良い質問の評価を上げる

    以下のような質問は評価を上げましょう

    • 質問内容が明確
    • 自分も答えを知りたい
    • 質問者以外のユーザにも役立つ

    評価が高い質問は、TOPページの「注目」タブのフィードに表示されやすくなります。

    質問の評価を上げたことを取り消します

  • 評価を下げられる数の上限に達しました

    評価を下げることができません

    • 1日5回まで評価を下げられます
    • 1日に1ユーザに対して2回まで評価を下げられます

    質問の評価を下げる

    teratailでは下記のような質問を「具体的に困っていることがない質問」、「サイトポリシーに違反する質問」と定義し、推奨していません。

    • プログラミングに関係のない質問
    • やってほしいことだけを記載した丸投げの質問
    • 問題・課題が含まれていない質問
    • 意図的に内容が抹消された質問
    • 広告と受け取られるような投稿

    評価が下がると、TOPページの「アクティブ」「注目」タブのフィードに表示されにくくなります。

    質問の評価を下げたことを取り消します

    この機能は開放されていません

    評価を下げる条件を満たしてません

    評価を下げる理由を選択してください

    詳細な説明はこちら

    上記に当てはまらず、質問内容が明確になっていない質問には「情報の追加・修正依頼」機能からコメントをしてください。

    質問の評価を下げる機能の利用条件

    この機能を利用するためには、以下の事項を行う必要があります。

回答 1

checkベストアンサー

+1

URIにGETクエリを付けてのルータのリンク呼び出しということならば、router-linkタグのtoにqueryでデータをつければ、そのリンクをクリックするとGETクエリ付きで遷移できます。
router-link 日本語ガイド

その後、マッチしたルータ定義に指定してあるExample.vueのコンポーネントでthis.$route.query.pageでGETクエリデータを取得して、リモートサーバーへのAPIアクセスの引数に使うとページにあったデータが取得できるかと思います。

Laravel付属のプログラムからrouter-linkでqueryを使うサンプルを作ってみました(Laravel Mixを使っています)。

app.js

window.Vue = require('vue');

import VueRouter from 'vue-router'
Vue.use(VueRouter)

// Components
const Home = { template: '<div>home</div>'    }
import Example from "./Example.vue"

// Router
const routes = [
    { path: '/',    component: Home },
    { path: '/example', component: Example },
];

const router = new VueRouter({
    mode: 'history',
    routes
});

const app = new Vue({
    el: '#app',
    router
})

Example.vue

<template>
    <p>example page:{{page}}</p>
</template>

<script>
    export default {
        data() {
            return {
                page: null
            }
        },
        mounted : function() {
            //GETクエリのデータを取得
            this.page = this.$route.query.page
            this.callApi()
        },
        watch: {
            '$route' (to, from) {
                this.page = this.$route.query.page
                this.callApi()
            }
        },
        methods: {
            callApi(){
                console.log(`APIの呼び出し page:${this.page}`)
            }
        }
    }
</script>

index.blade.php

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="{{ mix('css/app.css') }}">
    <script src="{{ mix('js/vue_test/app.js') }}" defer></script>
</head>
<body>
    <div id="app">
        <nav>
            <ul>
                <router-link tag="li" to="/" exact><a>home</a></router-link>
                <!-- GETクエリの変数pageでデータを渡す -->
                <router-link tag="li" :to="{ path: 'example', query: { page: '1' }}"><a>page1</a></router-link>
                <router-link tag="li" :to="{ path: 'example', query: { page: '2' }}"><a>page2</a></router-link>
            </ul>
        </nav>
        <router-view></router-view>
    </div>

</body>
</html>

投稿

  • 回答の評価を上げる

    以下のような回答は評価を上げましょう

    • 正しい回答
    • わかりやすい回答
    • ためになる回答

    評価が高い回答ほどページの上位に表示されます。

  • 回答の評価を下げる

    下記のような回答は推奨されていません。

    • 間違っている回答
    • 質問の回答になっていない投稿
    • スパムや攻撃的な表現を用いた投稿

    評価を下げる際はその理由を明確に伝え、適切な回答に修正してもらいましょう。

  • 2017/08/31 20:58

    分かりやすくご解説頂きありがとうございました。時間がかかりましたが上手く解決することができました。
    いつも助けていただき、感謝しております!!

    キャンセル

15分調べてもわからないことは、teratailで質問しよう!

  • ただいまの回答率 90.01%
  • 質問をまとめることで、思考を整理して素早く解決
  • テンプレート機能で、簡単に質問をまとめられる