vue 小案例 点击文章列表 进入当下文章页面

最终功能：

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>