url参数值如果在页面显示，需要过滤html标签 vue 前端如何检查上述内容

在Vue前端开发中，如果你需要将URL参数值显示在页面上，并且要确保这些值不会被解释为HTML标签，从而防止跨站脚本攻击（XSS），你需要对这些参数值进行HTML编码。在Vue中，可以使用内置的`v-html`指令来插入HTML，但这通常不推荐，因为它会使内容可被解释为HTML，增加XSS风险。

为了避免XSS攻击，可以使用JavaScript库，如`DOMPurify`来清除任何潜在的危险代码。以下是一个简单的例子，展示如何在Vue中对URL参数值进行HTML编码处理后安全地显示在页面上：

首先，安装`dompurify`：

npm install dompurify

然后，在你的组件中，使用`DOMPurify`来清洗参数值：

<template>
  <div>{{ safeHtml }}</div>
</template>

<script>
import DOMPurify from 'dompurify';

export default {
  data() {
    return {
      urlParam: '<script>alert("XSS")</script>', // 这是一个危险的HTML代码示例
    };
  },
  computed: {
    safeHtml() {
      // 使用DOMPurify来清理HTML代码，防止XSS攻击
      return DOMPurify.sanitize(this.urlParam);
    }
  }
};
</script>

在这个例子中，`DOMPurify.sanitize`函数会移除`urlParam`中的任何恶意代码，只保留安全的HTML代码片段。计算属性`safeHtml`将返回清洗后的字符串，并且在模板中被安全地显示。