最终功能:
index.js路由页面,给单独文章页面配置路由:
用id区分当下用户点击哪条文章
{
path: '/blog/:id',
name: 'singleblogs',
component: singleblogs
},
showblogs.vue列表页面路由配置代码:
在所有列表页面,点击标题,跳转页面:
v-bind:to="'/blog/'+ b.id"
前提:渲染数组中每条需要有id数据
<div class="single-blog" v-for="b in filteredBlogs">
<router-link v-bind:to="'/blog/'+ b.id">
<h2 v-rainbow>{{b.title}}</h2>
</router-link>
</div>
singleblog.vue单独文章页面所有代码:
1. 用this.$route.params.id获取路由点击的id,
2. 获取当下页面内容:赋给data()中的blog
this.blog = data.body;
3. 将数据渲染到页面
<h1>{{blog.title}}</h1>
<article>{{blog.body}}</article>
<template>
<div class="single-blog">
<h1>{{blog.title}}</h1>
<article>{{blog.body}}</article>
</div>
</template>
<script>
export default {
name: "singleblogs",
data(){
return{
id:this.$route.params.id,
blog:{}
}
},
created(){
this.$http.get("https://jsonplaceholder.typicode.com/posts/" +this.id)
.then(function (data) {
//console.log(data)
this.blog = data.body;
})
},
}
</script>
<style scoped>
.single-blog{
max-width: 960px;
margin:0 auto;
padding:20px;
background: #eee;
border:1px dotted #aaa;
}
</style>