vue-cli根据id跳转---详情页,数据从数据库获取

主页
在div中绑定一个方法传入id
@click=“detail(item.id)”
item.id 为v-for循环出来的id

方法

detail(id){
 	this.$router.push({path:`/details/${id}`}); 
}

详情页

export default {
    props:{
        "id":{type:String}
    },
    data() {
        return {
        	//保存数据库返回来的数据
        	//通过循环data获得数据
            data:[]
        }
    },
    mounted() {
        var url="findDetail";
        var obj={id:this.id};
        this.axios.get(url,{params:obj}).then(result=>{
            this.data=result.data.data;
        })
    },
 }

服务器

server.get("/detail",(req,res)=>{
    // 获取页面传过来的参数
    var id=req.query.id;
    var sql="sql语句 WHERE id=?"
    pool.query(sql,[id],(err,result)=>{
        if(err) throw err;
        res.send({code:1,msg:"查询成功",data:result});
    })
});

你可能感兴趣的:(vue)