首页 > 社区问答列表 >在Vue Router中为可选URL参数设置默认值,同时具有独立的可选URL参数。

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

我有以下路由

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中后面的参数被设置了,如何为可选参数设置默认值呢?


P粉377412096
P粉377412096

  • P粉785905797
  • P粉785905797   采纳为最佳   2023-08-04 12:52:00 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(),
        },
      });
    }, 

    +0 添加回复