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

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

交互

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

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

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

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

我来解答赞 0 收藏

反馈

1 条解答

设计师一莹 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