router.push中使用params传参,接收不到参数?

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就可以?

阅读 6.9k
1 个回答

params传参

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

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

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

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

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题