在Vue Router中为可选URL参数设置默认值，同时具有独立的可选URL参数。

Question

我有以下路由

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

我有一个方法，接受筛选条件并更新路由：

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

我遇到的问题是，如果id为null，而handed被设置了，返回的URL是：person/handedValue，而我需要的是person/all/handedValue。

如果URL中后面的参数被设置了，如何为可选参数设置默认值呢？

Answer 1

我认为目前没有这种方式，但如果有的话，它不能被视为可选项。我建议如果filters.getId()为空，只需简单地传入字符串'all'。

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(),
    },
  });
},