具有动态属性的Vue3重定向答案

【问题标题】：Vue3 Redirect with dynamic property具有动态属性的Vue3重定向
【发布时间】：2021-10-13 15:35:00
【问题描述】：

我的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 Router 文档中没有找到这个场景。

【问题讨论】：

标签： javascript vue.js vue-router vuejs3 vue-router4

【解决方案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

【讨论】：