import axios from 'axios';
let base = 'http://example.com/wp-json/wp/v2';
//獲取文章列表
export const getArticleList = params => {
  return axios.get(`${base}/posts`, params).then();
};

import {getArticleList,getCategories} from '../api/api';

data () {
  return {
    articleData: [{
      title: {
        rendered: ''
      },
       excerpt: {
        rendered: ''
      }
    }],
  }
},
mounted: function () {
  this.getarticlelist()
  this.getcategories()
},
methods: {
  getarticlelist(){
    getArticleList().then(res => {
      this.articleData = res.data
    })
  },
}

<ul>
  <li v-for="(item,index) in articleData">
    <h1 v-html="item.title.rendered"></h1>
    <div v-html="item.excerpt.rendered"></div>
    <span>查看詳情</span>
  </li>        
</ul>

<span @click="article(index)">查看詳情</span>
article(index){
  let ids = this.articleData[index].id
  this.$router.push({
    path: '../article/' + ids
  })
},

//獲取單篇文章
export const getArticle = ids => {
  return axios.get(`${base}/posts/${ids}`).then(res => res.data);
};

import {getArticle} from '../api/api';
getarticle(){
  //獲取id
  let ids = this.$route.params.id
  //使用獲取到的id去請求api
  getArticle(ids).then(res => {
    this.articleData = res
  })
},

<el-col class="article">
  <h1 v-html="articleData.title.rendered"></h1>
  <p class="p"><span>作者：{{articleData.author}}</span><span>發(fā)布時間：{{articleData.date}}</span></p>
  <div v-html="articleData.content.rendered"></div>
</el-col>

<el-pagination 
  layout="prev, pager, next" :page-size="per_page"
  :total="total" @current-change="handleCurrentChange">
</el-pagination>

let params = {
  page: this.page,
  per_page: this.per_page,   
}
getArticleList({params}).then(res => {
  let headerData = Object.values(res.headers)
  this.articleData = res.data
  this.total = parseInt(headerData[2])
         
})     

handleCurrentChange(val) {
  this.loading = true
  this.page = val
  this.getarticlelist()
},

//獲取文章分類
export const getCategories= params => {
  return axios.get(`${base}/categories`, params).then(res => res.data);
};
html
<ul>
  <li v-for="item in categoriesData">{{item.name}}
  </li>
</ul>
js
mounted: function () {
  getcategories(){
    getCategories().then(res => {
      this.categoriesData = res
    })
  }
}    

<ul>
  <li v-for="(item,index) in categoriesData" @click="categorie(index)"
            :class="{ 'active': active == index }">{{item.name}}
  </li>
</ul>

let params = {
  page: this.page,
  per_page: this.per_page,
  categories: this.categories
}

categorie(index){
  this.categories = this.categoriesData[index].id
  this.page = 1
  this.active = index
  this.getarticlelist()
}