CODEWITHSUNDEEP
vuejs2vue-router
MarioC
MarioC

Reputation: 3228

Vue js - How to route requests with query string

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

Upvotes: 2

Views: 17775

Answers (5)

Alan Ho
Alan Ho

Reputation: 825

you can do this also by vue route's dynamic-matching: https://router.vuejs.org/guide/essentials/dynamic-matching.html#reacting-to-params-changes

  created () {
    // call backend
  },
  watch: {
    $route(to, from) {
    // call backend with (to.params.xxxx)
    }
  }

Upvotes: 0

menepet
menepet

Reputation: 882

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

Upvotes: 6

Dazzle
Dazzle

Reputation: 3083

I wasn't able to get this working with vue-router however

When parent component is created() {...}

check for if (this.$route.query.order} exists

then set this.viewOrder to true, and load the child component

and pass props to child component

Upvotes: 0

Filipe Costa
Filipe Costa

Reputation: 80

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

Upvotes: 2

Ignas Damunskis
Ignas Damunskis

Reputation: 1504

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.

Upvotes: 12

Related Questions