Почему не срабатывает вызов $router.push( )?

Question

[serega_chem]

Есть компонент для отображения записей с возможностью пагинации:

<template>
    <v-container grid-list-md>
        <v-layout row wrap>
<!--Блок с контентом-->
            <v-flex sm6 v-for="customer in customers">
                <v-card>
                    <v-card-title>
                        <div>
                            <v-btn fab small>
                                {{customer.id}}
                            </v-btn>
                            <v-icon>fas fa-phone</v-icon>
                            {{customer.phone}}
                        </div>
                    </v-card-title>
                </v-card>
            </v-flex>

<!--Блок пагинации-->
            <div class="text-xs-center">
                <v-btn fab dark small
                       v-for="i in +pageCount"
                       :color="(i == curPage) ? 'primary' : 'blue-grey'"
                       @click="paginate(i)"
                >{{i}}
                </v-btn>
            </div>


        </v-layout>
    </v-container>

</template>

<script>
    import axios from 'axios';

    export default {
        name: 'Customer',
        data() {
            return {
                customers: [],
                curPage: 0,
                pageCount: 0,
            }
        },

        created() {
            this.loadCustomers();
        },

        methods: {

            loadCustomers() {
                let fullPath = this.$route.fullPath;
                axios.get('http://rest.loc' + fullPath)
                    .then(response => {
                        this.customers = response.data;
                        let headers = response.headers;
                        this.curPage = headers['x-pagination-current-page'];
                        this.pageCount = headers['x-pagination-page-count'];
                    })
                    .catch(e => {
                        console.log(e);
                    })
            },

            paginate(number) {
                this.$router.push('/customers?page=' + number);
                //Как сделать чтобы работало без следующей строчки
                this.loadCustomers();
            }
        }
    }
</script>

1. Пагинация работает только если вызывать loadCustomers().
2. При нажатии вперед, либо назад в браузере адрес в строке меняется, но данные на странице - нет
Что я упускаю?

Приведу еще router.js

import Vue from 'vue'
import Router from 'vue-router'
import Home from './components/Home.vue'
import About from './components/About.vue'
import Customer from './components/Customer'

Vue.use(Router)

export default new Router({
	mode: 'history',
	routes: [
	  {
	  	path: '/',
	  	name: 'Home',
	  	component: Home
	  },
	  {
	  	path: '/about',
	  	name: 'about',
	  	component: About
	  },
	  {
	  	path: '/customers',
	  	name: 'customers',
	  	component: Customer
	  }
	]
})

Answer 1

[0xD34F]

Экземпляр компонента не пересоздаётся при смене страницы, так что хук created не вызывается, метод loadCustomers соответственно, тоже.

Надо установить слежение за изменениями страницы, например так:

watch: {
  '$route.query.page'() {
    this.loadCustomers();
  },
},

Или так (в этом случае вызывать в created метод loadCustomers не надо):

watch: {
  '$route.query.page': {
    immediate: true,
    handler: 'loadCustomers',
  },
},

Comments

[serega_chem]

Спасибо!

Answer 2

[Андрей Шулепин]

Может быть так?:
.push({path:'/customers?page=' + number});

Comments

[serega_chem]

Нет, ничего не меняется