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()

为 null

则简单地传入字符串 '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(),
    },
  });
},