1.列表页

<template>
  <div v-for="(item, i) in items" :key="i">
     <img :src="item.imageInput" @click="toDetail(item.id)" class="pin" />
        ......
  </div>
 
 </template>
<script>
export default {
  data () {
    return {
      items:[
        {
          imageInput: '',
           ......
         }
      ]
    }
  },
  methods: {
    toDetail(id) {
       this.$axios({
          method: 'get',
          url: 'http://192..../api/article/list ',   //后端提供的接口
          headers: { 'Authorization':  window.sessionStorage.getItem("token") },
          data: {
            id: id
          }
        })
          .then(res => {
            this.$router.push({
              path: '/particulars',     // 跳转页面
              query: {
                    id
              }
            })
            console.log(res)
          })
          .catch(function (error) {
           console.log(error)
          })
      }
    }
  }
</script>

2.详情页面

<template>
 <div>
   <div class="conts q-pa-md bg-white">
      <div class="title text-h6">{{ item.title }}</div>
      <img :src="item.imageInput" class="img" />
      <p class="section" v-html="item.content">{{ item.content }}</p>
   </div>
   <div class="butt">
    <q-btn
      color="primary"
      align="between"
      label="每日测试"
      to="exam"
    />
  </div> 
</div>
</template>
<script>
export default {
  data () {
    return {
      item:{
        title: '',
        imageInput: '',
        content: ''
      }
    }
  },
  created() {
    this.getList()   //打开页面是数据自动渲染页面
  },
methods: {
 getList() {
   let id = this.$route.query.id   //接收列表页面的id
   this.$axios({
      method: 'get',
      url: 'http://192.。。。/api/article/details/' + id,   //此处是后端给的接口和ID进行了一个拼接，后端给的接口是http://192.。。。/api/article/details/{id}
      headers: { 'Authorization':  window.sessionStorage.getItem("token") },
      data: []
    })
    .then(res => {
      this.item = res.data.data
      console.log(res.data.data)
      console.log(res)
    })
    .catch(function (error) {
      console.log(error)
    })
  }
 }
}
</script>

以上，就成功获取到ID以及完成了详情页面的数据获取