文章内容页调用接口

src/article/Index.vue

@@ -2,25 +2,26 @@
   <div class="page_article">
     <header class="header">
         <h1 class="title">
-            {{ article.title }} + {{ this.$route.params.id }}
+            {{ article.title }}
         </h1>
         <p class="desc">
-            {{ article.description }}
+            <!-- {{ article.description }} -->
         </p>
     </header>
-    <article class="content">
-        这里面是内容
+    <article class="content" v-html="article.content">
     </article>
   </div>
 </template>
 
 <script>
 import Vue from 'vue'
+import { articleDetail } from '../api/commont'
 
 export default Vue.extend({
   name: 'Article',
   data() {
     return {
+      articleId: null,
       article: {
         author: {
           avatar: 'http://img1.3lian.com/gif/more/11/2012/03/d037a77443c0a72a1432d815cd3b5724.jpg',
@@ -34,6 +35,24 @@ export default Vue.extend({
         cover: ''
       }
     }
+  },
+  created() {
+    // 页面创建时取到文章的ID
+    this.articleId = this.$route.params.id
+    // 获取文章详情
+    this.getDetail(this.articleId)
+  },
+  methods: {
+    getDetail(id) {
+      articleDetail(id).then((res) => {
+        console.log(res)
+        if (res.code === 0) {
+          this.article = res.data.article
+        } else {
+          console.log(res.msg)
+        }
+      })
+    }
   }
 })
 </script>