Vue js - How to route requests with query string

Question

I have a router-view object made in this way

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'
      }
    }
  ]
})

when i hit /company link the router correctly sends me to the ObjectList component

In this page I have a simple pagination component made in this way

<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>

Now, the second page, for instance, correctly has this url:

/company?page=2

and if i click on it, i go to the correct url. the problem is how to tell the router-link that on pressing the second page button another call to the backend must be done? I thought the use-router option should catch this link and make the request as when i click the /company link in my standard navigation bar, but obviously not..

Solution 1

You can receive query props using this.$route.query

You should define computed prop to receive:

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

Now you can watch this property and on every change call the backend:

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

Also consider calling backend on created event hook once computed property page is set (depends on your needs):

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

Feel free to ask more if something unclear or if I misunderstood you.

Solution 2

You can also handle every url query param change with this piece of code:

watch: {
        '$route.query': {
            immediate: true,
            handler(newVal) {
                console.log(newVal)
                // make actions with newVal.page
            }
        }
    }

Solution 3

Just want to add an improvement related to @Ignas Damunskis answer that is already great.

If you want to listen to changes on created and when the specific property changes (in this case the query parameter)

You don't need the created method, you can do it all in one on the watch method, like below:

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

Hope it helps :)

Comments

[MarioC]

Thanks Ignas it's very clear now, watching the computed property is what i need but i need it in the parent because my pagination is a child component, but i can accomplish it with your answer