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

       在前端开发过程中，经常会遇到 在页面跳转的时候 ，需要把一个或多个参数传到 目标页面，那么如何实现带一个参数或多参跳转呢？

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

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

本文主要演示一下编程式导航 router.push  传递参数的实现。

编程式导航又分两种方式：

第一种是 命名路由，第二种是查询参数 

命名路由params：

1、先演示使用 params 只传递一个参数的写法

 只传递一个参数，直接在path中添加 /:id  (取名根据实际需要)来对应 $router.push 中path携带的参数

//点击跳转的方法
 goPwdList(index, row) {
      this.$router.push({
//直接调用$router.push 实现携带参数的跳转
        path: `/index/passwordlist/${row.houseNo}`
 });

//路由  路由跳转路径需要配置参数
 {
     path: 'passwordlist/:houseno',
     component: PasswordList
  },

//在目标页面获取父组件通过路由传递过来的参数
var house_id = this.$route.params.houseId;

2、params  传递多个参数

传递多个参数时，params可以配合路由中的name 来使用，也可以和传递一个参数那样 直接在路由路径上拼接多个参数

对应组件使用路由的方法如下：

ps：在很多文章中，都有说params传参只能用name来引入路由，必须写明name，比如如下代码，这应该是官方推荐的规范的写法吧，我是在实践中发现可以直接path带多个参数，进行params传参，如我上面所写，可能不是规范写法，但我感觉可以比较简洁，也不用每次路由都要写明name。个人比较喜欢，博友们看情况使用就好

//router.js 路由文件
{
      path:"/detail",
      name:"detail",
      component:home
}

//页面跳转逻辑
this.$router.push({
   name:"detail",
   params:{
    name:'nameValue',
    code:10011
 }
});

对应目标组件，获取路由上传过来的参数：

注意：是this.route 而不是 this.router

//解构赋值写法
let { tenantPhone,houseId,apartmentId,tenantId } =this.$route.params;

查询参数(query)

使用查询参数的方式，在路由配置中，path就不用再拼接参数

在父组件中，直接将需要传递的参数放在query里，如下

在子组件中使用this.route.query 接收参数

//解构赋值写法
let { tenantPhone,houseId,apartmentId,tenantId } =this.$route.query;

ps：使用params传递参数，url上只会出现数据，不会出现具体字段

     而使用查询参数query的方式，url上会出现具体的字段，比较不安全

 

以上实现方法都是我在实际项目中实践过的，亲测有效。若有不严谨之处，欢迎指教！

 

//2020/07/22 更新 添加params传参说明

//2020/09/18 添加解构赋值写法