vue传参方式

Posted 2020-12-17 jiyingaoshou

//query传参，使用name跳转

  this.$router.push({
       name:‘second‘,
       query: {
         queryId:‘20180822‘,
         queryName: ‘query‘
       }
  })

 //query传参，使用path跳转
   this.$router.push({
      path:‘second‘,
      query: {
        queryId:‘20180822‘,
        queryName: ‘query‘
      }
  })

//params传参，使用name跳转

   this.$router.push({

     name:‘Lineitem‘,

     params: {

     name: ‘admin‘,

     vade: row.orderId,

     mode: row.otherOrderId

    }

  })

//接收使用得参数

  mounted() {

     this.queryParam.phoneSerial = this.$route.params.node

     this.queryParam.otherOrderId = this.$route.params.mode

     console.log(‘this.$route.params‘, this.$route)

     this.queryParam.accountId = this.$route.params.code;

  },

使用query传值是在地址后面拼接，params传值是直接使用

需要注意的是：

params是路由的一部分,必须要在路由后面添加参数名。query是拼接在url后面的参数，没有也没关系。
params一旦设置在路由，params就是路由的一部分，如果这个路由有params传参，但是在跳转的时候没有传这个参数，会导致跳转失败或者页面会没有内容。