Notification API 在 Vue 中为什么点击按钮没反应？

夏侯雯婷提问于 2026-03-08 11:26:19 阅读 35

交互

我在 Vue 项目里想用 Notification API 弹通知，但点了按钮完全没反应，也没报错。是不是我漏了什么权限申请？

我试过在 mounted 里直接调用，也试过在方法里写，都不行。代码大概是这样：

<template>
  <button @click="showNotify">发通知</button>
</template>

<script>
export default {
  methods: {
    showNotify() {
      new Notification('你好', { body: '这是一条测试通知' });
    }
  }
}
</script>

我来解答赞 7 收藏

反馈

2 条解答

夏侯艺天 Lv1

兄弟，踩过这个坑，你少了个关键步骤。Notification API需要用户先授权才能用，直接new Notification肯定会没反应。

首先在调用前要检查权限状态，然后请求权限。改下你的代码：

export default {

  methods: {

    showNotify() {

      if (Notification.permission === 'granted') {

        new Notification('你好', { body: '这是一条测试通知' });

      } else if (Notification.permission !== 'denied') {

        Notification.requestPermission().then(permission => {

          if (permission === 'granted') {

            new Notification('你好', { body: '这是一条测试通知' });

          }

        });

      }

    }

  }

}

别走弯路，记得在https环境下测试，本地http可能也会有问题。另外注意浏览器版本支持，有些老浏览器不认这套API。我当初调试这玩意折腾了好久才搞明白。

2026-03-27 10:09

设计师一莹 Lv1

Notification API这玩意儿用起来确实有点坑，特别是前端这块。你的代码本身没问题，但Notification API有两个关键点必须注意：

1. 必须先请求用户授权，不然代码执行了也不会有反应。现代浏览器都要求显式获取权限。

2. 必须在用户交互事件（比如点击事件）里触发，直接在mounted里调用是不行的。

改下你的代码，这样写就对了：

methods: {

  async showNotify() {

    // 先检查权限

    const permission = await Notification.requestPermission()

    

    if (permission === 'granted') {

      new Notification('你好', { body: '这是一条测试通知' })

    } else {

      console.log('用户拒绝了通知权限')

    }

  }

}

注意这里要用async/await，因为requestPermission返回的是Promise。另外建议在页面加载时就先请求权限，不要等到点击时才请求，这样体验会好一些。

还有个常见问题：如果是localhost开发环境，有些浏览器默认允许通知，但部署到线上后可能就不行了，这点要特别注意。

2026-03-08 12:01