vue-router4 动态路由的参数怎么实现可传可不传？

Question

例如我可以打开/contract/info/form页面，也可以打开/contract/info/form/112页面。这两个页面都使用一个vue文件。vue-router要怎么配置？
现在这样有问题，只能男足一种情况：

Answer 1

让【宝码香车】来帮您解答，本回答参考DeepSeek编写，并整理提供。

如果答案让您满意，请采纳、点赞、关注，非常感谢！
.  
每日一句正能量，让它带给您好心情：学会和自己和解，是一生的修行。
.  

在 Vue Router 4 中实现动态路由参数可传可不传，可以通过以下两种方式配置：

方法一：使用可选参数（推荐）

在路由路径中使用 ? 标记参数为可选：

const routes = [
  {
    path: '/contract/info/form/:id?',  // 注意这里的问号
    name: 'ContractinfoForm',
    component: () => import('@/views/contract/info/form.vue')
  }
]

方法二：使用两个独立路由

如果需要有不同逻辑处理，可以配置两个独立路由指向同一组件：

const routes = [
  {
    path: '/contract/info/form',
    name: 'ContractinfoForm',
    component: () => import('@/views/contract/info/form.vue')
  },
  {
    path: '/contract/info/form/:id',
    name: 'ContractinfoFormWithId',
    component: () => import('@/views/contract/info/form.vue')
  }
]

组件内获取参数

在组件中可以通过 useRoute 获取参数：

import { useRoute } from 'vue-router'


const route = useRoute()
const id = route.params.id // 无参数时为 undefined


// 或者带默认值
const id = route.params.id || 'default'

注意事项

1. 当使用可选参数时，/form 和 /form/ 是不同的路径（后者带斜杠）
2. 如果需要在导航守卫中区分，可以使用 route.matched 检查
3. 保持路由命名一致性（如都使用 ContractinfoForm）

根据你的截图，建议修改路由配置为：

{
  path: '/inforform/:id?',  // 注意问号
  name: 'ContractinfoForm',
  component: () => import('/views/contract/info/form'),
}