首页 前端知识 Vue3 使用 Vue Router 时,params 传参失效

Vue3 使用 Vue Router 时,params 传参失效

2024-08-14 00:08:45 前端知识 前端哥 757 391 我要收藏

前言:

        在写项目的时候,使用了 vue-router 的 params 进行传参,但是在详情页面中一直获取不到参数。原因:Vue Router 在2022-8-22的那次更新后,使用这种方式在新页面上无法获取!

正文:

 在列表页进行路由跳转

在详情页获取params的值

 打印结果为空对象!!!

 解决方式:

 根据文档给出的解决方法,我选择第二种当时,通过pathquery进行传参;注意:query传参可以使用path也可以使用name ,并且所有参数都会显示在URL 地址上。

 列表页:

 详情页:

总结:

vue3项目进行路由传参最好不要使用 params,可以使用

        1、path + query 进行传参,但是参数会显示在地址栏里

        2、将参数放在 pinia 或 vuex 仓库里

        3、使用动态路由匹配

        4、传递 state ,在新页面使用 History API 接受参数

        5、使用 meta 原信息方式传递

方式4实现代码:

 列表页:

详情页获取参数:

 控制台打印结果:

转载请注明出处或者链接地址:https://www.qianduange.cn//article/15518.html
标签
评论
发布的文章

04-Json/Ajax/Vue的知识

2024-08-21 10:08:39

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!