vue多列表传参跳转相应的详情页

    //列表一模板
    <div class="NewsList">
      <ul>
        <li v-for="(item,index) in newList" :key=index>
          <div class="newsImg" @click="more(item.path,index+1)"><img :src="item.img"/></div>
          <div class="newsText">
            <div class="newsTitle" @click="more(item.path,index+1)">{{item.title}}</div>
            <div class="newsContent">
              {{item.text}}
            </div>
            <div class="newsRight" @click="more(item.path,index+1)">查看详情>></div>
          </div>
          </li>
      </ul>
    </div>
    //JS逻辑
    methods:{
      more1(e,index){
        console.log(e,index);
        //this.$router.push({path: `${e}?id=${index}`});
        this.$router.push({path:e,query: { id: index}});
      },
      more2(e,type){
        console.log(e,type);
        this.$router.push({path:e,query: { productType: type}});
      }
    }
    //data数据
  data(){
    return {
      newList:[
        {
          id:1,
          img: require('../../static/images/product01.png'),
          title:"个人都拥有创造力，而我们只是想做孩子创造力的糖块",
          text: "号外号外",
          path:"/aticle"
        },
        {
          id:2,
          img: require('../../static/images/product02.png'),
          title:"个人都拥有创造力，而我们只是想做孩子创造力的糖块",
          text: "号外号外！",
          path:"/aticle"
        },
        {
          id:3,
          img: require('../../static/images/product03.png'),
          title:"个人都拥有创造力，而我们只是想做孩子创造力的糖块",
          text: "号外号外",
          path:"/aticle"
        },
        {
          id:4,
          img: require('../../static/images/product04.png'),
          title:"个人都拥有创造力，而我们只是想做孩子创造力的糖块",
          text: "号外号外",
          path:"/aticle"
        }
      ]
    }
  },
    //详情页模板

    <div class="content" v-for="(item,index)  in thisStrList" :key="index">
     <div class="title">{{item.title}}</div>
        <div v-html="item.content">
           {{item.content}}
        </div> 
    </div> 

    //详情页js
    created(){
      //方法一：先获取列表一的参数(id)列表二的参数(type)
      let newId =this.$route.query.id;
      let productType =this.$route.query.productType;
      //循环遍历数组一的每一个对象
      for(var i=0;i<this.aticleList.length;i++){
       console.log(newId,this.aticleList[i].id)
       //如果数组的id 等于传进来的参数id
        if(this.aticleList[i].id==newId){
       //改变thisStrList的第一个对象，并显示
        this.thisStrList[0] = this.aticleList[newId-1];
        }
      }
      for(let i=0;i<this.productList.length;i++){
          console.log(productType,this.productList[i].id)
        if(this.productList[i].type==productType){
        this.thisStrList[0] = this.productList[productType-1];
        }
      }
      //方法二
    //   let newId =this.$route.query.id;
    //   let productType =this.$route.query.productType;
    //     if(newId){
    //         this.thisStrList[0] = this.aticleList[newId-1];
    //     }else if(productType){
    //          this.thisStrList[0] = this.productList[productType-1];
    //     }

  }
    //data数据
      data(){
      return{
          aticleList:[
              {
                  id:1,
                  title:'1111111',
                  content:'ggg'
              },
              {
                  id:2,
                  title:'222222',
                  content:'ggg'
              },
              {
                  id:3,
                  title:'3333',
                  content:'ggg'
              }
          ],   
          productList:[
              {
                  type:1,
                  title:'1111111',
                  content:'ggg'
              },
              {
                  type:2,
                  title:'222222',
                  content:'ggg'
              },
              {
                  type:3,
                  title:'3333',
                  content:'ggg'
              }
          ],     
         thisStrList :[
             {
             title :'测试',
             content:'测试'
             }
         ]
      }
  },