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