Set default values ​​for optional URL parameters in Vue Router while having independent optional URL parameters.

Question

I have the following route

export const personRoutes: RouteRecordRaw[] = [
  {
    path: '/person/:id?/:handedSlug?',
    name: 'Person',
    component: () => import('./view/person'),
  },
];

I have a method that accepts filter conditions and updates the route:

updateRoute(): void {
  const filters = this.filters;
  const router = this.$router;
  router.push({
    name: 'Person',
    params: {
      id: filters.getId(),
      handedSlug: filters.handedSlug(),
    },
  });
},

The problem I encountered is that if the id is null and handed is set, the returned URL is: person/handedValue, and what I need is person/all/handedValue.

If the following parameters in the URL are set, how to set default values ​​for optional parameters?

Answer 1

I don't think there is currently such a way, but if there is, it cannot be considered optional. I recommend simply passing in the string 'all' if filters.getId() is empty.

updateRoute(): void {
  const filters = this.filters;
  const router = this.$router;

  let routeId = filters.getId()
  if (!routeId && filters.handedSlug()) {
    routeId = 'all'
  }

  router.push({
    name: 'Person',
    params: {
      id: routeId,
      handedSlug: filters.handedSlug(),
    },
  });
},