Vue v-html渲染后端返回的a标签 保留单页面跳转

Question

最近在做一个社交类的项目，后端想对用户的发表内容 @用户名 这种处理返回一个a标签
例如：
输入： 这是我朋友 @chaser
返回： 这是我朋友 @chaser

请问大神们，如何让这个a标签也走router-link的功效呢，或者也实现利用后端数据渲染出单页面跳转效果

Answer 1

1 把 字符串解析成 节点数据

let arrNode = JSON.parse('['+'这是我朋友 @chaser 这是我同事 @lisa 这是我亲戚 @mike'.replace(/(@[^\s]*|[^@]*)/g, function($all, $1){
    return ',{"type":"'+($1.charAt(0)==='@'?'@':'text')+'", "content":"'+$1+'"}';
}).substr(1)+']')

2 vue 组件入参 解析的节点数据数组

<div v-for="node in arrNode">
    <route-link :to="{name:'at-user', params:{user:item.content.substr(1)}}" v-if="node.type === '@'">{{item.content}}</route-link>
    <div v-else="">{{item.content}}</div>
</div>