1.在路由中配置path, 形式:path:"/xxx/:param" , 斜线+冒号+参数
{ name:"Blog", component:Blog, path:"/blog/:id" },
2.在router-link标签用to绑定路由,:to=" '/blog/'+param " ,路由部分要加单引号
<div class="box" v-for="(item,i) in getSearch"> <router-link :to="'blog/'+(i+1)"> <h3>{{item.title}}</h3> <p>{{item.body}}</p> </router-link> </div>
3.获取路由参数
点击带有参数的路由,地址栏会带有对应的参数:
获取这个参数,然后通过接口传递给后台,返回对应参数的数据,this.$route.params.xxx
created() { this.$axios .get("http://jsonplaceholder.typicode.com/posts/" + this.$route.params.id) .then(res => { console.log(res); this.blog = res.data; }); }