javascript - 具有动态属性的Vue3重定向

Question

我在我的有这个配置router.ts：

{
  path: "/admin/operations/job-allocation/:id",
  name: "JobAllocation",
  component: () =>
    import(
      "@/views/admin/operations/job-allocation/index.vue"
    ),
  children: [
    {
      path: "",
      redirect:
        "/admin/operations/job-allocation/:id/operatives",
    },
    {
      path: "/admin/operations/job-allocation/:id/operatives",
      name: "JobAllocationOperatives",
      alias: "Operatives",
      component: () =>
        import("@/views/common/Operatives.vue"),
    },
  ]
}

当我访问路径时：/admin/operations/job-allocation/1我想去/admin/operations/job-allocation/1/operatives。

但在此设置中，它转到/admin/operations/job-allocation/:id/operatives(:id 作为 ':id' 的文字字符串，而不是被数字 1 替换。

我希望使用路由器来执行此操作，而不是使用“已安装”挂钩在 JobAllocation 组件处进行重定向。

这甚至可能吗？我在官方的 Vue3 路由器文档中没有找到这个场景。

Answer 1

使用 的对象形式redirect通过名称指定路由，以便参数自动传递：

export default createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: HelloWorld
    },
    {
      path: '/admin/operations/job-allocation/:id',
      name: 'JobAllocation',
      props: true,
      component: () => import('@/views/admin/operations/job-allocation/index.vue'),
      children: [
        {
          path: '',
          redirect: {
            name: 'JobAllocationOperatives', 
          },
        },
        {
          path: '/admin/operations/job-allocation/:id/operatives',
          name: 'JobAllocationOperatives',
          alias: 'Operatives',
          component: () => import('@/views/common/Operatives.vue')
        }
      ]
    }
  ]
})

演示