业务中有一块是通知中心，其中的通知文本中有的文字是可以点击跳转到其他页面的。但是又不想使用富文本渲染。遂采用以下实现方式

  • v-html 渲染
  • a 标签标识可跳转链接
  • dataset 设置参数
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<template>
  <div>
    <div v-html="text" @click="click"></div>
  </div>
</template>
<script>
export default {
  name: "About",
  data() {
    return {
      text: `你好，这是<a data-name='Preview' data-id='123' data-mode="preview">链接</a>。这是 <span class="active">强调色</span> 的文本`
    }
  },
  methods: {
    click(e) {
      if (e.target.dataset.name) this.$router.push({name: e.target.dataset.name, params: e.target.dataset})
    }
  }
}
</script>
<style>
.active {
  color: yellow;
}

a {
  color: yellow;
  cursor: pointer;
}
</style>

image.png