Vue.js动态路由传id跳转页面触发404错误问题咨询

1 修正路由跳转写法 #

Vue Router 规则：path 和 params 不能同时使用，同时传时 params 会直接失效，两种正确写法二选一：

• 方式1：使用name匹配路由（推荐，自动拼接参数）

methods: {
  go(idUser){
    this.$router.push({ 
      name: 'oprid',
      params:{ 
        id: idUser 
      } 
    })
  }
}

• 方式2：手动拼接参数到path中

go(idUser){
  // 注意路径要和路由定义完全匹配，你的文件在user目录下，路径前缀要加/user
  this.$router.push(`/user/opr/${idUser}`)
}

2 核对路由路径与路由配置 #

你当前跳转写的路径是/opr/:id，但你的文件存放在user/opr/_id.vue路径下，路由实际路径应该带/user前缀：

• 如果是约定式路由（Nuxt、unplugin-vue-router等方案）：对应的路由路径为 /user/opr/:id，路由名一般自动生成规则为user-opr-id，需要核对你配置的name: 'oprid'是否和实际路由名一致
• 如果是手动配置路由：确认router/index.js中的配置符合如下规则：

const routes = [
  // 其他路由...
  {
    path: '/user/opr/:id', // 路径必须和跳转时的路径前缀匹配
    name: 'oprid', // 和跳转时的name参数一致
    component: () => import('@/views/user/opr/_id.vue') // 组件路径正确
  },
  // 404路由必须放在所有路由的最后面
  {
    path: '/:pathMatch(.*)*',
    component: () => import('@/views/404.vue')
  }
]

3 确认动态路由文件命名规则 #

不同的路由方案动态参数文件命名规则不同：

• Nuxt2/Nuxt3 约定式路由：_id.vue 命名正确
• unplugin-vue-router（Vite生态常用）：需要命名为 [id].vue 才能识别为动态参数路由

4 核对404路由配置位置 #

如果你的通配符404路由放在了动态路由的前面，所有未匹配到前面静态路由的请求都会先命中404，需要将404路由调整到路由数组的最后一位。

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