Vue JS - Как направить запросы со строкой запроса - PullRequest
Новая
       9

Vue JS - Как направить запросы со строкой запроса

0 голосов
/ 08 апреля 2019

У меня есть объект просмотра роутера, созданный таким образом 

export default new Router({
  linkExactActiveClass: 'active', // active class for *exact* links.
  mode: 'history',
  routes: [
    {
      path: '/admin',
      name: 'dashboard',
      component: Dashboard
    },
    {
      path: '/company',
      name: 'company',
      component: ObjectList,
      props: {
        url: '/web/company',
        idColumn: 'companyId'
      }
    }
  ]
})

, когда я нажимаю / link компании, маршрутизатор корректно отправляет меня к ObjectList компоненту

. На этой странице ясделать простой компонент разбиения на страницы, сделанный таким образом 

<template>
  <div class="overflow-auto">
    <b-pagination-nav
      align="center"
      :link-gen="linkGen"
      :number-of-pages="totalPages"
      use-router
    ></b-pagination-nav>
  </div>
</template>

<script>
export default {
  data() {
    return {
    };
  },
  name: "pagination",
  props: {
    current: Number,
    url: String,
    totalPages: Number
  },
  methods: {
    linkGen(pageNum) {

      return pageNum === 1 ? "?" : `?page=${pageNum}`;
    }
  }
};
</script>

Теперь, например, вторая страница правильно имеет этот URL: 

/company?page=2

, и если я нажимаю на него, я идуна правильный URL.проблема в том, как сообщить роутеру-ссылке, что при нажатии кнопки на второй странице должен быть сделан еще один вызов бэкэнду?Я думал, что опция use-router должна перехватить эту ссылку и сделать запрос, как когда я нажимаю ссылку / company в моей стандартной панели навигации, но, очевидно, нет ..

Ответы [ 2 ]

2 голосов
/ 08 апреля 2019

Вы можете получать реквизиты запросов, используя this.$route.query

Вы должны определить вычисляемую реквизит для получения: 

computed: {
  page () {
    return this.$route.query.page || 1
  }
}

Теперь вы можете watch это свойство и при каждом изменении вызывать бэкэнд: 

watch: {
    page () {
        // call backend
    }
}

Также рассмотрите возможность вызова бэкэнда на created ловушке события, когда установлена ​​страница свойств computed (зависит от ваших потребностей): 

created () {
    // call backend by passing this.page
}

Не стесняйтесь спрашивать, есличто-то неясно или я вас неправильно понял.

0 голосов
/ 08 апреля 2019

Просто хочу добавить улучшение, связанное с ответом @Ignas Damunskis, которое уже замечательно.

Если вы хотите прослушать изменения при создании и при изменении конкретного свойства (в данном случае параметр запроса)

Вам не нужен созданный метод, вы можете сделать все это в одном с помощью метода watch, как показано ниже: 

watch: {
  page: {
    handler: function (val, oldVal) { /* ... */ },
    immediate: true
  }
}

Надеюсь, это поможет:)

...