Vue3 Redirect with dynamic property

Question

I have this configuration in my 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"),
    },
  ]
}

When I visit the path: /admin/operations/job-allocation/1 I want to go to /admin/operations/job-allocation/1/operatives.

But in this setup it goes to /admin/operations/job-allocation/:id/operatives (the :id as a literal string of ':id' instead of being replaced by the number 1.

I'm hoping to use the router to do this, instead of using a 'mounted' hook to do the redirect at the JobAllocation component.

Is this even possible? I did not find this senario in the official Vue3 Router docs.

score 4 · Accepted Answer · answered Aug 10 '21 at 04:36

Use the object form of redirect to specify the route by name, so that the parameters are automatically passed along:

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

Vue3 Redirect with dynamic property

1 Answers1