Vue Router嵌套动态路由配置咨询：如何定义含双动态参数的路由

嘿，我来帮你搞定这个嵌套动态路由的问题！你现在的需求是把 /features/:id/template/:templateId 改成嵌套路由结构，其实只需要调整路由的层级关系就行，我给你一步步说明：

原问题分析 #

你当前的路由里，/features/:id/template/:templateId 是作为独立路由存在的，而我们需要把它嵌套在 /features/:id 下面，形成层级更清晰的嵌套结构，这样也更符合 Vue Router 嵌套路由的设计逻辑。

修改后的路由配置 #

直接替换你原来的 routes 数组即可，关键是给 :id 这个子路由再添加一层 children：

const routes: Array<RouteRecordRaw> = [
  { 
    path: '/', 
    redirect: '/login', 
  },
  { path: '/login', component: LoginField, },
  { 
    path: '/features', 
    component: FeaturePage, 
    children: [ 
      {
        path: ':id', 
        component: FeaturePage, 
        props: true,
        // 新增：嵌套的 template 路由，对应 /features/:id/template/:templateId
        children: [
          {
            path: 'template/:templateId',
            component: TemplatePage,
            props: true // 自动将路由参数转为组件 props
          }
        ]
      }
    ] 
  },
  { path: '/notFound(.*)', redirect: '/features', },
];

关键说明 #

• 路由层级：因为你的目标路径是 /features/:id/template/:templateId，所以这个路由必须是 /:id 路由的子路由，这样路径会自动拼接成完整的嵌套路径。
• props: true 的作用：开启这个配置后，路由参数（id 和 templateId）会自动作为 props 传递给对应的组件，不用再通过 $route.params.id 这种方式获取，组件的复用性和可测试性更好。
• 移除独立路由：原来的独立路由 { path: '/features/:id/template/:templateId', component: TemplatePage, } 可以删掉了，嵌套路由已经完全覆盖了这个路径。

组件接收参数示例 #

以 <script setup> 语法为例，TemplatePage 可以这样接收参数：

<script setup>
// 定义 props，类型根据你的实际参数调整（String/Number）
const props = defineProps({
  id: String,
  templateId: String
})

// 直接使用 props.id 和 props.templateId 即可
console.log('当前 feature ID:', props.id)
console.log('当前 template ID:', props.templateId)
</script>

注意事项 #

别忘了在父组件 FeaturePage 的模板中添加 <router-view> 标签！嵌套路由的组件会渲染在父组件的 <router-view> 里，否则子路由内容无法显示：

<template>
  <!-- FeaturePage 的原有内容 -->
  <div class="feature-content">...</div>
  
  <!-- 子路由组件会渲染在这里 -->
  <router-view></router-view>
</template>

这样配置后，访问 /features/123/template/456 就能正确匹配到嵌套路由，并且参数会自动传递给 TemplatePage 组件啦～

内容的提问来源于stack exchange，提问作者LaFllamme