前言:
在写项目的时候,使用了 vue-router 的 params 进行传参,但是在详情页面中一直获取不到参数。原因:Vue Router 在2022-8-22的那次更新后,使用这种方式在新页面上无法获取!
正文:
在列表页进行路由跳转
在详情页获取params的值
打印结果为空对象!!!
解决方式:
根据文档给出的解决方法,我选择第二种当时,通过path和query进行传参;注意:query传参可以使用path也可以使用name ,并且所有参数都会显示在URL 地址上。
列表页:
详情页:
总结:
vue3项目进行路由传参最好不要使用 params,可以使用
1、path + query 进行传参,但是参数会显示在地址栏里
2、将参数放在 pinia 或 vuex 仓库里
3、使用动态路由匹配
4、传递 state ,在新页面使用 History API 接受参数
5、使用 meta 原信息方式传递
方式4实现代码:
列表页:
详情页获取参数:
控制台打印结果: