方法一:params的类型
1. 配置路由时动态绑定路由
![在这里插入图片描述](https://img-blog.csdnimg.cn/306a043dc46943379a17593123f0445d.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP5oWI,size_18,color_FFFFFF,t_70,g_se,x_16)
2. 方式一:router-link方式跳转路径时,传递参数
![在这里插入图片描述](https://img-blog.csdnimg.cn/fc5f69f8fd534f69bd5bb29c85f4cc30.png)
3. 方式二:绑定点击事件跳转路径时,传递参数
![在这里插入图片描述](https://img-blog.csdnimg.cn/cbd892f115c746b4974c0d1c66b295a0.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/ae681ee5c0654880986bd60800ad2773.png)
4. 跳转到detail页面时,获取这个id
通过$route.params.id来获取跳转时传递过来的参数
$route:当前哪个路由处于活跃状态,拿到的就是哪个路由
![在这里插入图片描述](https://img-blog.csdnimg.cn/9d29e8cd9c9d4d3aa9dcbe36be6fbc17.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP5oWI,size_20,color_FFFFFF,t_70,g_se,x_16)
方法二、query的类型
1. 普通方式配置路由映射关系
![在这里插入图片描述](https://img-blog.csdnimg.cn/54029263eae94e0787518ad5f462b962.png)
2. 方式一:router-link方式跳转路径时,传递参数
![在这里插入图片描述](https://img-blog.csdnimg.cn/71d186a0d732425ba48762626834a420.png)
3.方式二:绑定点击事件跳转路径时,传递参数
![在这里插入图片描述](https://img-blog.csdnimg.cn/433d73e6eae5428e99f5f0e276234f95.png)
![在这里插入图片描述](https://img-blog.csdnimg.cn/c6c6e94393ac41d7bf7cadd26720aec0.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP5oWI,size_15,color_FFFFFF,t_70,g_se,x_16)
4. 跳转到profile页面时,获取这个参数
![在这里插入图片描述](https://img-blog.csdnimg.cn/5125eb7bb3f940bbac0cd5731839d25b.png?x-oss-process=image/watermark,type_d3F5LXplbmhlaQ,shadow_50,text_Q1NETiBA5bCP5oWI,size_19,color_FFFFFF,t_70,g_se,x_16)