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

前言：

        在写项目的时候，使用了 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实现代码：

 列表页：

详情页获取参数：

 控制台打印结果：