=============
前端_详情页面
=============

1 安装Markdown渲染器MarkdownIt

IDEA
    终端
        > cnpm install markdown-it-vue --save

/src/main.js：

...
import MarkdownItVue from 'markdown-it-vue'
import 'markdown-it-vue/dist/markdown-it-vue.css'
import 'mavon-editor/dist/highlightjs/styles/default.min.css'
...
Vue.use(MarkdownItVue)
...

2 文章详情

<template>
  <div>
    <Header></Header>

    <div class="blog">
      <h2>{{blog.title}}</h2>
      <el-link icon="el-icon-edit" v-if="own">
        <router-link :to="{name:'Edit',params:{id:blog.id}}">
          编辑
        </router-link>
      </el-link>
      <el-divider />
      <markdown-it-vue class="md-body" :content="blog.content" />
    </div>
  </div>
</template>

<script>
import Header from "@/components/Header"

export default {
  name: "Detail",
  components: {Header},
  data() {
    return {
      blog: {
        id: "",
        title: "",
        content: ""
      },
      own: false
    }
  },
  created() {
    const id = this.$route.params.id
    console.log(id)

    const _this = this
    this.$axios.get('/blog/' + id).then(response => {
      const blog = response.data.data
      _this.blog.id = blog.id
      _this.blog.title = blog.title
      _this.blog.content = blog.content
      _this.own = (blog.userId === _this.$store.getters.getUser.id)
    })
  }
}
</script>

<style scoped>
.blog {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 100%;
  min-height: 550px;
  padding: 20px 15px;
}
</style>