Vue路由参数可设置默认值吗？含特定可选参数路由场景

可以在路由定义阶段直接为动态参数指定默认值，完全不需要在组件的created钩子中执行重定向操作。针对你给出的路由路径:uuid*/form/:step，具体实现方式如下：

关键配置步骤 #

1. 先将step参数改为可选参数（在参数后添加?），这样不带step的路径也能匹配到该路由；
2. 通过路由的props函数，为step指定默认值，同时可按需处理uuid参数的默认情况。

代码示例（Vue Router 3/4通用） #

const routes = [
  {
    path: '/:uuid*/form/:step?', // 给step添加?标记为可选参数
    name: 'FormStep',
    component: FormStepComponent, // 你的表单组件
    props: route => ({
      // 为uuid设置默认值（如果需要）
      uuid: route.params.uuid || '',
      // 为step指定默认值，这里以'1'为例
      step: route.params.step || '1'
    })
  }
]

效果说明 #

• 当访问/abc123/form时，组件会自动接收到step: '1'的默认值；
• 当访问/abc123/form/3时，组件会使用传入的step: '3'；
• 组件可以直接通过props接收参数，无需从$route中读取，更符合组件的复用原则。

如果不想修改路径参数的可选性（即要求路径必须带step），则无法在路由定义阶段设置默认值——因为不带step的路径会直接匹配失败，此时只能通过重定向处理，但这正是你想避免的场景，所以推荐上述可选参数+props默认值的方案。

内容的提问来源于stack exchange，提问作者T. Antunes