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

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

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

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

javascript
1const router = new VueRouter({
2    mode: 'history',
3    routes: [
4        { path: '/', name: 'home', component: Index},
5        { path: '/example/', name: 'example', component: Example},
6    ]
7})
8
9export default router

javascript
1
2// Example.vue
3
4<template>
5  ...
6</template>
7
8<script>
9import { get } from '../connectio/api'
10
11export default {
12    data() {
13        return {
14            data : [],
15            counter: 0,
16            pagination: {
17                total: 0,
18                per_page: 8,
19                from: 1,
20                to: 0,
21                current_page: 1
22            },
23            offset: 2,
24        }
25    },
26    mounted : function() {
27        this.getPage(this.pagination.current_page);
28    },
29    methods: {
30        getPage(page) {
31            get(`/api/example?page=` + page)
32                .then((res) => {
33                    this.pagination = res;
34                    this.data = res.data;
35                })
36                .catch((err) => {
37                    // error
38                })
39
40        },
41    }
42}
43</script>

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

行動規範の内容に同意します

回答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/11 22:48