Vue js - How to route requests with query string - vuejs2

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

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

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

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

Answer 4

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

Answer 5

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