Vue Router - Set default query parameters

Question

I'm implementing an paginated list. Therefore I'm using query parameters like ?size=10. This query paramter needs to be always inside my URL (like /home?size=2).

This apporach is not working:

const routes = [{ path: "/home", query: { size: "10" }, components: MyPage }];
const router = createRouter({
  history: createWebHistory(),
  routes,
});

I thought it is instantiating the route with some parameters. Looking into the Routing section of vue devtools shows me an empty query object:

$route:/home
  fullPath:"/home"
  path:"/home
  query:Object (empty)
  hash:""
  name:undefined
  params:Object (empty)
  matched:Array[0]
  meta:Object (empty)
  redirectedFrom:undefined
  href:"/home

How can I set a default query param to my route?

I would recommend you to implement the paginated list with javascript and not with routing. Or is there a special usecase why it has to be via routing? — h0p3zZ
– h0p3zZ, Commented Apr 26, 2022 at 17:49
Currently our approach is vanilla JS. For reasons we are migrating to vue. I saw that you can (and should?!) handle query parameters with vue router. For other usecases, like filtering the list, would be easier if we can handle it with query parameters and vue routing (we do not need to couple the filter components with the list components tightly). — Theiaz
– Theiaz, Commented Apr 26, 2022 at 17:54
Even if it could somehow be feasible to have default in Vue router, I recommend using a global state with either Vuex or Pinia to have this dynamic (end user would be able to change it, if he prefers 20 elements per pagination). Setting a default value in the store would be totally feasible too and more common as a practice. — kissu
– kissu, Commented Apr 26, 2022 at 17:58
Thanks for the inputs. In the momenet, we are trying to avoid using a tool for statemanagement (adds more complexity, we are newbies). However I'm interested in some examples. Can u link them? Additionally, how could we achieve this without vuex/pinia? — Theiaz
– Theiaz, Commented Apr 26, 2022 at 18:04

Nechoj · Accepted Answer · 2022-04-26 18:18:26Z

3

Here is a proposal using the beforeEach NavigationGuard:

const routes = [{ path: "/home", name: "Home", components: MyPage }];

const router = createRouter({
  history: createWebHistory(),
  routes,
}); 

router.beforeEach((to, from) => {
  if(to.name === "Home" && !to.query.hasOwnProperty("size")){
      to.query.size = "10"
  }
})

The idea is to add to the route a default query parameter for size when it is not there.

answered Apr 26, 2022 at 18:18

Nechoj

1,5921 gold badge12 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Andreas Linnert Over a year ago

This can be done more directly by adding a beforeEnter method to the route object. Then you also don't need to check to.name === 'Home'. Just tried it because I needed to set a default to to.params. And if you do to.query.size ??= '10' you don't need an if at all.

h0p3zZ · Accepted Answer · 2022-04-26 18:09:11Z

1

The only way to achieve this properly without defining the default value in every router.push() is probably with Navigation Gurads. You can use them to get the query-parameters that are currently in the url, add the default query-params you need and then return the new route.

Though I would not do it, this is probably the easiest way to achieve this.

And if you want to make them customizable via pinia/vuex you would need to set up a store and make a user input to change the setting.

Note: Pinia is most likely the better option, because it is newer and will still be supported far in the future

answered Apr 26, 2022 at 18:09

h0p3zZ

7374 silver badges21 bronze badges

Collectives™ on Stack Overflow

Vue Router - Set default query parameters

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related