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 替换。

我希望使用路由器来执行此操作，而不是使用 'mounted' 挂钩在 JobAllocation 组件中执行重定向。

这可能吗？我在官方 Vue3 Router 文档中没有找到这个 senario。

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')
        }
      ]
    }
  ]
})

demo