Vue Router：后置可选参数存在时为前置可选参数设默认值

方法1：跳转时手动处理参数 #

直接在生成路由参数时添加判断逻辑，当handedSlug有值但id为空时，主动将id设为'all'，确保URL结构符合需求。

修改后的updateRoute方法：

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

  // 后置参数存在时，给空的前置参数设置默认值
  if (params.handedSlug && !params.id) {
    params.id = 'all';
  }

  router.push({
    name: 'Person',
    params,
  });
},

方法2：路由守卫全局处理 #

如果需要在所有进入该路由的场景下统一处理，可以给路由添加beforeEnter守卫，自动修正参数：

修改路由配置：

export const personRoutes: RouteRecordRaw[] = [
  {
    path: '/person/:id?/:handedSlug?',
    name: 'Person',
    component: () => import('./view/person'),
    beforeEnter: (to) => {
      // 检测到handedSlug存在但id为空时，重定向到带all的路径
      if (to.params.handedSlug && !to.params.id) {
        return {
          name: 'Person',
          params: {
            id: 'all',
            handedSlug: to.params.handedSlug,
          },
        };
      }
    },
  },
];

这种方式无需修改各处的跳转代码，一次配置全局生效。

内容的提问来源于stack exchange，提问作者JimmyBanks