vue-cli中点击列表传参进入列表详细页面

vue-cli中点击列表传参进入列表详细页面

一种点击事件的传参方式:

contribute.vue页面传

<template>
    <div class="conwrap" v-for="(item,index) in lists" :key="index" @click="detail(item)">
          <div class="img">
            <img src="http://pic1.nipic.com/2008-12-30/200812308231244_2.jpg" alt=""><!--item.COVER_PLAN-->
          </div>
          <div>
              <h3>{{item.THEME}}</h3>
              <p>{{item.NOTICE}}</p> 
        </div>
      </div>
</template>
<script>
	export default {
			name: "contribute",
			  data(){
        		return{
         			 lists:[]
        }
      },
			methods:{
				 detail(item){
		      this.$router.push({path:'/homecontribute',query: { THEME_ID: item.THEME_ID,THEME:item.THEME}});
        }
			}
	}
</script>

homecontribute.vue页面接受并且tongg接口当参数传获取数据

<script>
    export default {
        name: "homecontribute",
      data(){
          return{
              lists:{},
            END_TIME:"",
            theme:"",
            theme_ID:""
          }
      },
      created(){
        this.deatils()
      },
      methods:{
        deatils(){
          let themeID=this.$route.query.THEME_ID;
          let theme=this.$route.query.THEME;
          this.theme =theme
          this.theme_ID =themeID
          console.log(this.theme)
          this.$ajax.get(meadiaurl.url + '/FH_AM6/api/theme/getThemeDetailByID',
            {
              params: {THEME_ID:this.theme_ID}
          }).then((res) => {
            let code = res.data.code;
            if(code ==200){
              this.lists = res.data;
              this.END_TIME = res.data.data.END_TIME;
            }
          }).catch((response)=>{
            console.log(response);
          })
        }
      }
    }
</script>

写简单点吧

传：

this.$router.push({path:'/homecontribute',query: { THEME_ID: item.THEME_ID,THEME:item.THEME}});

接：

		  let themeID=this.$route.query.THEME_ID;   //编号id
          let theme=this.$route.query.THEME;  //编号名字

通过router-link传递：

传：

<router-link :to="{path:'/clue',query:{ THEME:item.THEME,CODE:item.CODE}}" ></router-link>

接：

created() {
      this.clue_title = this.$route.query.THEME;   //线索标题
      this.code = this.$route.query.CODE;    //关联事件编号
    },

以上就是vue-cli中点击列表传参进入列表详细页面的全部内容