VueJS网站无jQuery实现点击按钮添加书签/收藏方案求助

我来帮你解决这个问题！现在主流浏览器早就废弃了你试过的addFavorite、addPanel这类旧API啦——出于安全和用户体验考虑，浏览器禁止网页自动修改用户书签，必须由用户主动触发操作才行。下面给你一个适配VueJS的实用方案：

核心实现思路 #

因为没有跨浏览器通用的自动添加书签API，我们的方案会：

1. 尝试兼容极少数旧浏览器的遗留方法（仅作兜底）
2. 对现代浏览器，友好引导用户用快捷键或手动操作完成收藏

Vue组件示例代码 #

直接在你的Vue组件里加一个按钮和对应的方法就行：

<template>
  <!-- 按钮要通过用户点击触发，不能自动调用 -->
  <button @click="handleAddBookmark" class="bookmark-btn">
    收藏本页面
  </button>
</template>

<script>
export default {
  methods: {
    handleAddBookmark() {
      const pageTitle = document.title;
      const pageUrl = window.location.href;
      const userAgent = navigator.userAgent.toLowerCase();

      try {
        // 适配旧版IE（现在几乎没人用了，仅作兼容）
        if (userAgent.includes('msie') || userAgent.includes('trident')) {
          window.external.addFavorite(pageUrl, pageTitle);
          alert('已成功添加书签！');
          return;
        }

        // 适配旧版Firefox（已废弃，仅作兼容）
        if (userAgent.includes('firefox')) {
          window.sidebar.addPanel(pageTitle, pageUrl, '');
          alert('已成功添加书签！');
          return;
        }

        // 现代浏览器：根据不同浏览器给出精准提示
        const isMac = userAgent.includes('mac');
        const shortcut = isMac ? 'Cmd + D' : 'Ctrl + D';
        let tipMessage = `快速收藏：按下 ${shortcut} 即可`;

        if (userAgent.includes('safari') && !userAgent.includes('chrome')) {
          tipMessage += '\n也可以点击顶部工具栏的「分享」按钮，选择「添加书签」';
        } else if (userAgent.includes('chrome') || userAgent.includes('edge')) {
          tipMessage += '\n或者点击地址栏右侧的星形图标完成收藏';
        }

        alert(tipMessage);
      } catch (err) {
        // 兜底提示，确保所有情况都有反馈
        alert('请手动收藏本页面：点击浏览器地址栏右侧的星形图标，或使用快捷键 Ctrl+D（Windows）/ Cmd+D（Mac）');
      }
    }
  }
}
</script>

关键注意事项 #

• 必须用户主动触发：这个方法只能绑定在按钮点击这类用户主动操作上，不能在页面加载时自动调用，否则浏览器会直接阻止。
• 移动端适配：移动端浏览器大多没有书签API，你可以在提示里补充：比如Safari移动端引导用户点击底部分享按钮→「添加到主屏幕」；Chrome移动端引导点击右上角三点→「添加到主屏幕」。
• 放弃自动添加：别再找自动添加的方法啦，现代浏览器都把这个权限锁死了，强制引导用户手动操作才是合规且可行的方案。

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