router.push中使用params传参，接收不到参数？

  • Z时代
  • 2024-02-08
  • 分类：IT

vue和vue-router版本如下：
"vue": "^3.2.13",
"vue-router": "^4.0.15",

点击跳转时代码如下：

const router=useRouter()
router.push({ name: 'recordDetail', params:{name:'111'} });

页面接收参数，打印为空

const route = useRoute();        
console.log(route.params);

路由定义

{
  path: 'recordDetail',
  name: 'recordDetail',
  component: RecordDetail,
  meta: {
      title: '服务记录详情',
  },
},

是哪里出了问题？params传参就接收不到，query就可以？

回答：

params传参

//比如这种
router.push({ name: 'recordDetail', params:{id:11} });
// 需要配置路由时候将参数配置到路由上
path: '/user/:id',

如果没在路由配置params参数，在我之前开发过程中也是能在下一个页面获取到参数（参数丢失也经常出现），但一旦发生页面刷新之类的，数据直接丢失，

是哪里出了问题？params传参就接收不到，query就可以？

这个是因为标准模式是提供route获取参数，params默认是嵌入路由内的参数，如path: '/user/:id',嵌入了id参数，如果不在路由内设置，直接用params:{id:11}传在路由内实质上不存在这个变量而是存在于缓存中，如果页面无刷新之类操作有一定几率通过vuerouter插件函数取到值，但不合规范，目前插件更新，这种非法传递大概已经被禁了吧

以上是 router.push中使用params传参，接收不到参数？ 的全部内容， 来源链接： utcz.com/p/932815.html

回到顶部