传递方式：query

通过query传递参数有两种写法，以点击按钮可查看当前表格行详情为例

写法1：以查询参数的形式拼接在路径后

   <button @click="jumpHandler">查看详情</button>

    /* 形式参数 id 是当前行数据的标识 */
   jumpHandler(id) {
       this.$router.push({
           path:`product/detail?userId=${id}`
       })
   }

    /* 路由规则数组，无需额外配置 */
    [{
        name:'detail',
        path:'detail',
        component() => import('@/views/detail.vue'),
    }] 

   /* 使用方式: 参数被传递到当前路由信息对象中，通过this.$route可直接使用 */
   this.$route.query.userId

写法2：放在 query 属性中

   <button @click="jumpHandler">查看详情</button>

   jumpHandler(id) {
       this.$router.push({
           path:`product/detail`，
           query:{
               userId:id
           }
       })
   }

    /* 路由规则数组，无需额外配置 */
    [{
        name:'detail',
        path:'detail',
        component() => import('@/views/detail.vue'),
    }] 

   /* 使用方式: 参数被传递到当前路由信息对象中，通过this.$route可直接使用 */
   this.$route.query.userId

传递方式：params

通过params传递参数也有两种写法，以点击按钮可查看当前表格行详情为例。

注意：如果提供了 path，params 会被忽略

写法1：以“动态路径参数”的形式拼接在路径后

   <button @click="jumpHandler">查看详情</button>

   jumpHandler(id) {
       this.$router.push({
           path:`product/detail/${id}`
       })
   }

    /* 路由规则数组，需要额外配置 */
    /* “ /:id ” 也叫 “动态路径参数”(dynamic segment)，用使用冒号:标记 */
    [{
        name:'detail',
        path:'detail/:userId',
        component() => import('@/views/detail.vue'),
    }] 

   /* 使用方式: 参数被传递到当前路由信息对象中，通过this.$route可直接使用 */
   this.$route.params.userId

写法2：放在 params 属性中

   <button @click="jumpHandler">查看详情</button>

   jumpHandler(id) {
       this.$router.push({
          name:'detail',
          params:{
              userId:id
          }
       })
   }

    /* 路由规则数组，需要额外配置 */
    [{
        name:'detail',
        path:'detail/:userId',
        component() => import('@/views/detail.vue'),
    }] 

   /* 使用方式: 参数被传递到当前路由信息对象中，通过this.$route可直接使用 */
   this.$route.params.userId

传递方式：query 和 params 混合

两者混合时，可以传递多个参数

   <button @click="jumpHandler">查看详情</button>

   jumpHandler(id) {
       this.$router.push({
          name:'detail',
          query：{
               userId:id,
               weather:'rain'
          },
          params:{
              myName:'peet',
              myAge:'18'
          }
       })
   }

    [{
        name:'detail',
        path:'detail/:myName/:myAge',
        component() => import('@/views/detail.vue'),
    }] 

   /* 使用方式*/
   this.$route.query.userId
   this.$route.query.weather
   this.$route.params.myName
   this.$route.params.myAge