vue如何通过列表页的参数访问详情页

[纸包包]

api数据没有id，这个让我很惆怅，没有id要怎么传参到详情页呢？可不可以通过别的东西传参不用id


home.vue 列表页

<!--图书资讯-->
<div style="font-size:18px;color:#21212;padding:5px;margin-top:15px;" align="left">今日图书推介</div>
<div id="books_msg">
<table width="100%" height="96" border="0.5" v-for="(book,index) in lists.slice(0,1)" :key="index">
  <template>
  <tr>
    <td width="25%" rowspan="4"><div align="left"><img :src="book.img" width="100%" height="100px"></div></td>
    <td width="63%" height="36"><div align="left">
      <div>
        <router-link 
    :to="{name:'detail',params:{id:lists[index]}}" 
    style="font-size:18px;font-weight:bold;color:black" >《{{book.title}}》</router-link>
      </div>
    </div></td>
  </tr>
  <tr>
    <td><div align="left">本书标签：{{book.tags}}</div></td>
  </tr>
  <tr>
    <td height="23"><div align="left">简介:{{book.sub1}}</div></td>
  </tr>
  <tr>
    <td height="23"><router-link to="/more" style="color:#00796b;font-size:15px;float:right">查看更多</router-link></td>
  </tr>
  </template>
</table>


</div>

详情页 detail.vue

<template>
    <div id="detail">
    <div id="header">
    <span @click="back()" style="float:left">◁</span>
        <span style="font-width:bold">详情页</span>
        <span @click="home()" style="float:right;">首页</span> 
  </div>

    <div id="book_detail">
    <table>
        <tr>
            <td>{{title}}</td>
        </tr>
        <tr>
            <td>{{tags}}</td>
        </tr>
        <tr>
            <td>{{sub2}}</td>
        </tr>
        <tr>
            <td>{{reading}}</td>
        </tr>
        <tr>
            <td>{{bytime}}</td>
        </tr>
    </table>
    </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            data:{
               "title":"",
               "tags":"",
               "sub2":"",
               "reading":"",
               "bytime":""

            },
            
        }
    },
   mounted() {
       let id = this.$route.params.id;
        this.$store.dispatch('getUser',{
        user_id:this.user_id, 
        props:{
                "id":String
            }
      }).then((res)=>{
       // console.log(res.data.lists)
       this.data=res.data.lists[index];
      console.log("取完图书数据");
})
   },
    methods:{
        back(){
            this.$route.go(-1)
        },
        home(){
            this.$route.push('/home')
        }
    },
}
</script>

路由

{
      path: '/detail/:id',
      name: 'detail',
      components:{
        detail,
        tab
      },
       meta: {
         requiresAuth: true
       }
    },

[纸包包]

引用 2 楼 河南棒小伙的回复:

你这意思后端一起把所有数据都返回给你了，这个路由的:id并不是一定要你传id，它就是一个路由参数，你可以不传，也可以随意使用，比如你这种情况，你可以把index当id，不就是查看详情么，只要能定位到对应文章的详情数据不就行了？list[index]的数据传进详情一样达到目的了，关键看你怎么操作了，我说的有道理吧？

也是跟id一样的方法传吗？

[suchcl]

列表页,路由跳转的地方:

<div>
        <router-link 
    :to="{name:'detail',params:{sub2:lists.sub2}}" 
    style="font-size:18px;font-weight:bold;color:black" >《{{book.title}}》</router-link>
      </div>

详情页接收的地方:

data(){
        return{
            data:{
               "title":"",
               "tags":"",
               "sub2":this.$route.params.sub2,
               "reading":"",
               "bytime":""
 
            },
             
        }
    },

[极客诗人]

data 里面定Id呗

[河南棒小伙]

你这意思后端一起把所有数据都返回给你了，这个路由的:id并不是一定要你传id，它就是一个路由参数，你可以不传，也可以随意使用，比如你这种情况，你可以把index当id，不就是查看详情么，只要能定位到对应文章的详情数据不就行了？list[index]的数据传进详情一样达到目的了，关键看你怎么操作了，我说的有道理吧？

[纸包包]

谢谢各位的解答，后来我这样子解决的

<router-link 
    :to="{name:'detail',params:{id:lists[index]}}" 
    style="font-size:18px;font-weight:bold;color:#212121" >{{book.title}}</router-link>

 <div id="book_detail" style="margin-top:40px;padding:20px;">
    <table width="100%" height="100" border="0.5" class="table">
  <tr>
    <td width="25%" rowspan="4"><div align="left"><img :src="img" width="100%" height="100px"></div></td>
    <td width="63%" height="36">
        <div align="left" style="font-weight:bold;font-size:20px">
        {{title}}
    </div></td>
  </tr>
  <tr>
    <td><div align="left">本书标签：{{tags}}</div></td>
  </tr>
  <tr>
    <td height="23"><div align="left">已有【{{reading}}】过这本书</div></td>
  </tr>
 
</table>

<h1>长篇书评</h1>
<br>
<br>
<div class="sub2" v-html="sub2">
    
</div>
    </div>
    </div>
</template>
<script>
import home from "./home.vue";
import more from "./more.vue";

export default {

    data(){
        return{
            
                title:this.$route.params.id.title,
                tags:this.$route.params.id.tags,
                sub2:this.$route.params.id.sub2,
                reading:this.$route.params.id.reading,
                img:this.$route.params.id.img,
            
            
        }
    },
   created(){
        this.id = this.$route.params.id;  //获取id
        this.$store.dispatch('getUser',{
        id:this.id,
        user_id:this.user_id, 
        props:{
                "id":String
            }
      }).then((res)=>{
       
      console.log("取完图书详情页数据");
})
    },
   mounted() {
      
   },
    methods:{
        back:function(){
            this.$router.go(-1)
        },
        home:function(){
            this.$router.push('/home')
        },
    },
}
</script>

[DuShu2014]