单页应用(SPA)中如何通过@click事件调用URI实现按钮触发

你原来的按钮代码无法生效，是因为@click需要绑定JavaScript执行语句，直接写URI字符串只会被当作普通字符串解析，不会触发任何行为。下面是几种可行的实现方式：

方式1：直接在@click中调用window.open #

这种方式最简单，直接在点击事件里用window.open触发自定义URI：

<button square icon="open_in_new" @click="window.open('obsidian://open?vault=Obsidian&file=test')"></button>

方式2：封装为组件方法（更规范） #

把URI调用逻辑封装到组件的方法里，便于维护和复用：

<template>
  <button square icon="open_in_new" @click="openObsidianFile"></button>
</template>

<script>
export default {
  methods: {
    openObsidianFile() {
      // 用window.open触发自定义协议，不会影响当前SPA页面状态
      window.open('obsidian://open?vault=Obsidian&file=test')
      
      // 也可以用window.location.href，但可能导致当前页面跳转（自定义协议一般不会，但保险起见推荐window.open）
      // window.location.href = 'obsidian://open?vault=Obsidian&file=test'
    }
  }
}
</script>

方式3：模拟a标签点击（避免弹窗拦截） #

如果担心window.open被浏览器弹窗拦截，可以动态创建隐藏的a标签并触发点击，和你原来的a标签行为完全一致：

<template>
  <button square icon="open_in_new" @click="openObsidianFile"></button>
</template>

<script>
export default {
  methods: {
    openObsidianFile() {
      const link = document.createElement('a')
      link.href = 'obsidian://open?vault=Obsidian&file=test'
      // 触发点击
      link.click()
      // 用完移除元素
      link.remove()
    }
  }
}
</script>

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