Vue Router向受保护路由传状态失败：无效参数被丢弃问题

错误原因 #

Vue Router 4.1.4版本起，会严格校验路由跳转时传递的params是否与路由路径中定义的占位符匹配。你的create_reciepe路由路径为/create_reciepe，未定义任何路径参数（比如:id），但跳转时传递了整个reciepe.value对象作为params，其中的_id、dish_name等属性均不属于该路由的有效参数，因此被路由器全部丢弃，导致无法在目标路由中获取这些数据。

另外，你给该路由设置的props:true仅会将路径中定义的参数作为props传递，由于该路由无路径参数，所以这个配置并未生效。

解决方案 #

方案1：使用query传递数据（URL可见，刷新不丢失） #

修改跳转函数，将数据放在query中：

function editReciepe() {
  router.push({ name: 'create_reciepe', query: reciepe.value })
}

在CreateReciepe组件中获取：

import { useRoute } from 'vue-router'
const route = useRoute()
// 注意：query中的值会被转为字符串，复杂类型需手动序列化/反序列化
const reciepe = JSON.parse(JSON.stringify(route.query))

方案2：使用state传递数据（URL不可见，刷新丢失） #

通过history state传递数据，适合临时传递复杂对象：

function editReciepe() {
  router.push({ 
    name: 'create_reciepe',
    state: { reciepe: reciepe.value }
  })
}

在CreateReciepe组件中获取：

import { useRoute } from 'vue-router'
const route = useRoute()
const reciepe = route.state?.reciepe

方案3：结合props传递（组件化接收） #

如果希望通过props接收数据，可以修改路由定义为函数式props，结合state或query：

// route.js中修改create_reciepe路由配置
{
  path: '/create_reciepe',
  name: 'create_reciepe',
  component: CreateReciepe,
  meta:{
    auth:true,
  },
  props: (route) => ({ reciepe: route.state?.reciepe })
}

在CreateReciepe组件中直接通过props接收：

const props = defineProps({
  reciepe: Object
})

注意事项 #

• 避免用params传递非路径定义的参数，这是Vue Router 4.1.4+的强制规则，用于规范路由参数的传递。
• 若需要数据持久化（刷新页面不丢失），优先选择query（需处理序列化）或全局状态管理工具（如Pinia、Vuex）。

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