1. 程式人生 > >vue組件之間通過query傳遞參數

vue組件之間通過query傳遞參數

con -i 參數 icon 組件 code vue組件 lin span

需求:

任務列表進入 任務詳情 ,向詳情頁傳遞當前 mission_id

路由關系:

    //查看任務列表
    {
        path: ‘/worklist‘,
        name: ‘worklist‘,
        component: worklist,
    },
    //任務詳情
    {
        path: ‘/workdetails‘,
        name: ‘workdetails‘,
        meta: {
            requireAuth: true //需要先登錄
        },
        component: workdetails
    },

worklist.vue傳遞

<router-link :to="{
      path: ‘/workdetails‘,
      query: {
          mission_id: index.mission_id //當前missionID
       }
    }"
 class="aaalistlink">
  <el-button icon="el-icon-search" circle type="danger" class="check"></el-button>
</router-link>

workdetails.vue 中接收參數

var data = {
    mission_id :  this.$route.query.mission_id, //傳遞的missionID
    user_id :  this.$store.state.user_id
}

vue組件之間通過query傳遞參數