能否在JavaScript模板字符串中注入<router-link>实现带参路由跳转？

原实现方案可行性判定 #

• 你尝试直接在setErrorFor传入的错误提示字符串中嵌入<router-link>标签的写法完全不可行
• 核心原因：setErrorFor本质是通过原生DOM操作把传入的字符串转成HTML片段直接插入页面，Vue的模板编译流程不会处理这段插入的原生内容，<router-link>会被浏览器识别为无效的自定义标签，既不会渲染成可跳转的链接，也不会绑定路由导航逻辑。
• 另外你写法里嵌套原生<a>标签包裹<router-link>的结构本身也存在规范问题，就算组件可以正常解析，也会出现导航逻辑冲突。

正确实现方式 #

根据你现在的代码结构，可以从两种路径落地需求：

路径1：调整错误提示的渲染逻辑，适配Vue组件编译流程 #

• 放弃直接拼接HTML字符串传入setErrorFor的实现，把错误提示迁移到组件的模板逻辑中，通过响应式变量控制提示的显示/隐藏，直接在模板区域编写<router-link>的跳转逻辑
• 这种方式下<router-link>会被Vue正常编译解析，携带的邮箱参数可以正确传递，是最贴合Vue开发规范的实现
• 参考代码：

  <template>
    <div class="email-form-item">
      <input v-model="email" placeholder="请输入邮箱" />
      <span v-if="showEmailUsedError" class="error-message">
        Dit e-mailadres is al in gebruik..
        <router-link :to="{ name: 'loginScreen', query: { email: email } }">
          Inloggen?
        </router-link>
      </span>
    </div>
  </template>
  <script>
  export default {
    data() {
      return {
        email: '',
        showEmailUsedError: false
      }
    },
    methods: {
      async validateEmail() {
        // 校验邮箱是否已被占用的接口逻辑
        const isUsed = await checkEmailIsUsed(this.email)
        if (isUsed) {
          this.showEmailUsedError = true
        }
      }
    }
  }
  </script>
  

路径2：保留现有字符串注入的错误提示逻辑，手动绑定编程式导航 #

• 如果不想改动现有setErrorFor的通用方法，可以不依赖<router-link>组件渲染，直接给生成的原生跳转链接绑定点击事件，通过Vue Router的编程式导航实现带参数跳转
• 实现步骤：
  1. 生成的错误提示HTML中，给跳转链接加上唯一的类名标记，设置默认不触发原生导航
  2. 错误提示插入DOM后，找到这个带标记的链接节点，绑定点击事件，在回调中调用路由实例的push方法，携带当前输入的邮箱参数跳转
• 参考代码：

  // 校验发现邮箱已被占用，生成错误提示
  this.setErrorFor(
    emailFormControlInner,
    `<span>Dit e-mailadres is al in gebruik.. <a href="javascript:void(0)" class="login-jump-action">Inloggen?</a></span>`
  )
  // 给注入的链接绑定跳转逻辑
  const jumpLink = emailFormControlInner.querySelector('.login-jump-action')
  jumpLink.addEventListener('click', () => {
    // 携带邮箱参数跳转至登录页
    this.$router.push({
      name: 'loginScreen',
      query: { email: this.email }
    })
  })
  

  注意：如果项目使用Vue3 + Vue Router 4的技术栈，将上述代码中this.$router替换为useRouter()方法导入的路由实例即可。

参数传递的注意点 #

• 不要直接把邮箱参数放在路由params里传递：如果路由配置没有定义对应的动态路径段（比如path中没有标注:email），这类params参数会在页面刷新后直接丢失
• 更稳妥的传递方式是把邮箱放在query参数中，参数会直接拼接在路由地址后面，不会因为页面刷新丢失，登录页可以直接读取参数值完成输入框预填

内容的提问来源于stack exchange，提问作者Reinier68