vue-router 路由怎么传递一个或多个参数？

怼烎@ 2023-02-27 14:57 8阅读 0赞

**声明式导航用在直接渲染到页面  
编程式导航用于在js中处理逻辑后需要页面进行跳转**

vue-router中传递参数主要分两大类：

1.  编程式的导航 router.push
2.  声明式的导航 < router-link >

**本文主要演示一下编程式导航 router.push 传递参数的实现。**  
第一种是 **命名路由**,也成路由参数，第二种是**查询参数**

1.  **先演示使用 params 只传递一个参数的写法**  
    只传递一个参数，直接在path中添加 /:id (取名根据实际需要)来对应 $router.push 中path携带的参数

//点击跳转的方法
     goPwdList(index, row) { 
          this.$router.push({ 
    //直接调用$router.push 实现携带参数的跳转
          path: `/index/passwordlist/${ row.houseNo}`
     });
     
    //路由 路由跳转路径需要配置参数
     { 
         path: 'passwordlist/:houseId',
         component: PasswordList
      },
     
    //在目标页面获取父组件通过路由传递过来的参数
    var house_id = this.$route.params.houseId;

1.  params 传递多个参数  
    直接在路由路径上拼接多个参数  
    ![在这里插入图片描述][20200718154421681.png]  
    对应组件使用路由的方法如下：  
    ![在这里插入图片描述][20200718154444639.png]  
    对应目标组件，获取路由上传过来的参数：  
    **注意：是this.route 而不是 this.router**  
    ![在这里插入图片描述][2020071815455359.png]

## 查询参数(query) ##

使用查询参数的方式，在路由配置中，path就不用再拼接参数  
![在这里插入图片描述][20200718154723424.png]  
在父组件中，直接将需要传递的参数放在query里，如下  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70]  
在子组件中使用this.route.query 接收参数  
![在这里插入图片描述][20200718154803441.png]

ps：使用params传递参数，url上只会出现数据，不会出现具体字段  
![在这里插入图片描述][20200718154856867.png]  
而使用查询参数query的方式，url上会出现具体的字段，比较不安全  
![在这里插入图片描述][2020071815491147.png]

[20200718154421681.png]: /images/20230209/13925e7588984e62b37d003122563797.png
[20200718154444639.png]: https://img-blog.csdnimg.cn/20200718154444639.png
[2020071815455359.png]: https://img-blog.csdnimg.cn/2020071815455359.png
[20200718154723424.png]: https://img-blog.csdnimg.cn/20200718154723424.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200718154738916.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTEyMDA1NjI=,size_16,color_FFFFFF,t_70
[20200718154803441.png]: https://img-blog.csdnimg.cn/20200718154803441.png
[20200718154856867.png]: https://img-blog.csdnimg.cn/20200718154856867.png
[2020071815491147.png]: https://img-blog.csdnimg.cn/2020071815491147.png