laravel - Laravel 雄辩的数据或简单的道具在 Vue.Js 中创建自定义 Vue-router 链接

Question

我有一个用 VUE 和 Laravel 制作的 SPA。

Laravel 返回 API 请求，VUE 使用接收到的数据创建前端。

在少数情况下，我有一些 HTML 代码由 API 引擎作为编译数据返回，其中包含链接。

我想在 vue 路由器中使用这些链接，但如果我返回具有如下代码的 API：

JSON 代码

{
    comment: {
        'bla <strong>bla</strong> bla <router-link :to="name:\'page\'">text</router-link>'
    }
}

然后我在我的组件模板中使用 JSON 代码，例如：

<div v-html={comment}></div>

但这不是作为纯 HTML 呈现和返回的：我看到粗体但不是<a href='page'>text...我需要的，但我得到<router-link...的是纯文本。

简单的 JSFiddle 测试

这是我尝试复制问题的演示测试。如果您单击 Foo Link（顶部菜单），它会打开一个组件，其中包含带有 HTML 代码的道具数据。粗体显示正确，但未呈现路由器链接

data: {
    msg: 'Hello World',
    comment : '<div class="comment">This is a <strong>bold</strong> <br> 
               this should be a <router-link :to="{\'name\':\'home\'}">
               router link</router-link></div>'
        }

在这种情况下如何强制 vue-router 渲染？

标签： laravelvue.jssingle-page-applicationvue-router

Answer 1

由我自己修复：https ://jsfiddle.net/uncoke/92x0jhr1/

这是我自己的修复：

带有链接的自定义数据：

    { team: "<a href=\"/club/"+team.id+"\" data-to='{\"name\": \"team\",\"params\":{\"teamId\":"+ team.id+"}}'>"+ team.team+"</a> "+userCode,
 ....}

点击监听器

mounted() {
        window.addEventListener('click', event => {
            let target = event.target;
            if (target && target.href && target.dataset.to) {
                event.preventDefault();
                const url = JSON.parse(target.dataset.to);
                //router.push({ name: 'user', params: { userId: '123' } })
                this.$router.push(url);
            }
        });
    }