Поместите номер нумерации страниц в URL Vuejs - PullRequest
Новая
       3

Поместите номер нумерации страниц в URL Vuejs

0 голосов
/ 26 марта 2020

У меня есть рабочая нумерация страниц с использованием (Laravel, Vuejs и Bootstrap - Vue), но мне нужно добавить номер страницы в URL, чтобы использовать историю. (для кнопки назад). Это то, что у меня есть до сих пор. Цель - разместить страницу №. в URL, чтобы иметь кнопку возврата. 

{
    path: "/",  //here I will change it with "/:id"
    name: "Home",
    component: Home,
},

<b-pagination
    v-model="currentPage"
    :per-page="perPage"
    :total-rows="totalRows"
>
</b-pagination>   //this is my pagination nav, that takes currentPage from get Request

axios.get('/list',{
    params: {
        'page': this.currentPage,
        'per_page': this.perPage,
    },
})
.then(response => {
    this.perPage = response.data.per_page;
    this.totalRows = response.data.total;
})
.catch(function (error) {
    console.log('Error');
})  //and this is the get request

Обновление

Я добавляю router.push({ path: "/", query: { page: this.currentPage } }); в моем ответе на запрос. У меня есть путь, но когда я пытаюсь получить доступ к странице 2, его идентификатор меняется на 2 и снова на 1. и я получил ошибку дубликата.

NavigationDuplicated {_name: "NavigationDuplicated", имя: "NavigationDuplicated", сообщение: "Переход к текущему местоположению (" /? page = 1 ") не разрешен "

ОБНОВЛЕНИЕ 2 Я почти сделал это, единственное, что еще не работает, это активный класс, на нумерации страниц, всегда страница 1 активна. (переменная content, url и currentPage изменены) 

watch:{
    currentPage() {
      this.$router
        .push({
          query: {
            ...this.$route.query,
            page: this.currentPage
          }
        })
        .catch(() => {});
    },
}

//In reseponse from axios:
this.currentPage = response.data.current_page;

1 Ответ

0 голосов
/ 26 марта 2020

На основании этого ответа о том, как заменить текущий запрос другим, и этого ответа о том, как можно просто игнорировать ошибку, я нашел решение, приведенное ниже.

Я использую вычисляемое свойство для автоматического изменения URL-адреса при изменении текущей страницы, и на основе ответа я добавляю пустое значение .catch к нашему pu sh, чтобы устранить ошибку, поскольку она по-прежнему прекрасно перемещается .

Редактировать

Он полностью забыл о компоненте b-pagination-nav, предназначенном для изменения URL. Я думаю, что первый пример в документации может быть вам полезен, так как это изменяет текущую страницу с помощью запроса ?page=n. 

<template>
  <b-pagination
    v-model="currentPage"
    :per-page="perPage"
    :total-rows="totalRows"
  >
  </b-pagination>
  <b-table :items="items" :current-page="currentPage" :per-page="perPage">
  </b-table>
</template>

<script>
export default {
  created() {
    // Save the page for later use.
    // If our query isn't found, we default to page 1.
    const page = this.$route.query.page || 1;

    // fetch our data, this fetches all records and uses clientside pagination.
    fetch("https://example.com/movies.json")
      .then(resp => resp.json())
      .then(data => {
        this.items = data;

        // since b-pagination will change the currentPage to 1,
        // we need to change it back to the actual page after fetching our items.
        this.$nextTick(() => {
          this.currentPage = page;
        });
      });
  },
  computed: {
    totalRows() {
      return this.items.length;
    },
    currentPage: {
      get() {
        return this.$route.query.page || 1;
      },
      set(newPage) {
        // You could alternatively call your API here if you have serverside pagination

        this.$router
          .push({ query: { ...this.$route.query, page: newPage } })
          .catch(() => {});
      }
    }
  },
  data() {
    return {
      perPage: 5,
      items: []
    };
  }
};
</script>
...