详情页面

Author: fxss5201

Diff for: layouts/default.vue

@@ -11,7 +11,7 @@
           <img class="logo" src="~assets/images/logo.jpg" alt="logo" />
         </template>
         <template v-else>
-          <van-icon name="arrow-left" style="font-size: 1.4em;" />
+          <van-icon name="arrow-left" style="font-size: 16px;" />
           <span>返回</span>
         </template>
       </div>
@@ -74,7 +74,7 @@ export default {
       let active = 0
       for (let index = 0, len = this.tabbar.length; index < len; index++) {
         const element = this.tabbar[index]
-        if (element.to === this.$route.path) {
+        if (element.name === this.$route.name) {
           active = index
           break
         }
@@ -88,6 +88,28 @@ export default {
       return `${this.tabbar[this.active].label}--${process.env.VUE_APP_title}`
     }
   },
+  watch: {
+    $route: {
+      handler(val, oldVal) {
+        if (val.name === 'detail-id') {
+          this.tabbar.push({
+            name: 'detail-id',
+            icon: 'label-o',
+            selectedIcon: 'label',
+            to: val.path,
+            label: '详情'
+          })
+        } else {
+          // eslint-disable-next-line no-lonely-if
+          if (this.tabbar.length === 5) {
+            this.tabbar.splice(4, 1)
+          }
+        }
+      },
+      deep: true,
+      immediate: true
+    }
+  },
   methods: {
     clickNavLeft() {
       if (!this.isHome) {

Diff for: package-lock.json

@@ -30,6 +30,7 @@
     "cross-env": "^5.2.0",
     "dayjs": "^1.8.21",
     "express": "^4.16.4",
+    "github-markdown-css": "^4.0.0",
     "nuxt": "^2.0.0",
     "vant": "^2.5.3"
   },

Diff for: package.json

@@ -1,11 +1,53 @@
 <template>
-  <div class="content">Detail {{ $route.params.id }}</div>
+  <div class="content">
+    <div class="detail-box">
+      <div
+        class="detail-article markdown-body"
+        v-html="detailInfo.info.articleContentHtml"
+      ></div>
+    </div>
+  </div>
 </template>
 
 <script>
+import 'github-markdown-css/github-markdown.css'
+
 export default {
-  name: 'Detail'
+  name: 'Detail',
+  async asyncData({ app, route, store, params, query }) {
+    let detailInfo = {}
+    const result = await app.$axios.$get('/api/vue-blog/article/detail', {
+      params: {
+        articleId: params.id,
+        changeView: 1
+      }
+    })
+    if (result.isok) {
+      detailInfo = result.data
+    }
+    return {
+      detailInfo
+    }
+  },
+  data() {
+    return {}
+  }
 }
 </script>
 
-<style lang="scss" scoped></style>
+<style lang="scss" scoped>
+.detail-box {
+  margin: 15px 0;
+  background-color: #fff;
+  .detail-article {
+    padding: 15px;
+    &.markdown-body {
+      /deep/ {
+        ol {
+          list-style: decimal;
+        }
+      }
+    }
+  }
+}
+</style>