Legen Sie Standardwerte für optionale URL-Parameter im Vue Router fest und verfügen Sie gleichzeitig über unabhängige optionale URL-Parameter.

Question

Ich habe die folgende Route

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

Ich habe eine Methode, die Filterbedingungen akzeptiert und die Route aktualisiert:

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

Das Problem, auf das ich gestoßen bin, besteht darin, dass, wenn die ID null ist und „handed“ festgelegt ist, die zurückgegebene URL „person/handedValue“ lautet und ich „person/all/handedValue“ benötige.

Wenn die folgenden Parameter in der URL festgelegt sind, wie werden Standardwerte für optionale Parameter festgelegt?

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