vue-marked生成的链接,如何使用vue-router渲染

发布于 2022-09-06 09:03:11 字数 1400 浏览 18 评论 0

初学vue-js,还不是很懂。
当页面渲染完成了,vue-marked生成的链接该如何渲染。
需要使用vue-router来跳转页面。marked直接生成的a标签跳转页面,页面中的其他组件的状态就刷新了。

export default {
    data() {
        return {
            item: {description: "[ array ](function.array.php)"}
        }
    },

    created: function () {
        let currVue = this;
        let renderer = new marked.Renderer();
        renderer.link = function (href, title, text) {
            return '<router-link :to="{ name: \'Display\', params: { language: "' +
                    currVue.$router.currentRoute.params.language + '",name:"' +
                    href + '" }}">User</router-link>';
        };
        marked.setOptions({
            renderer,
            gfm: true,
            tables: true,
            breaks: true,
            pedantic: false,
            sanitize: false,
            smartLists: true,
            smartypants: false,
            highlight: function (code) {
                return highlight.highlightAuto(code).value;
            },
        });
        // 其他代码
    }
}

template

<div v-html="marked(item.description)"></div>

最后生成的html

<div>  
    <router-link :to="{ name: 'Display', params: { language: "php",name:"function.array.php" }}"="">array</router-link>
<div>

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。
列表为空,暂无数据
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文