当前位置：首页 > news >正文

Electron + Vue 实现系统消息通知与点击跳转页面

news 来源：原创 2025/5/20 6:14:39

Electron + Vue 实现系统消息通知与点击跳转页面

在 Electron 应用开发中，系统通知（Notification）是提高用户体验的重要手段。配合 Vue 路由实现“点击通知跳转到指定页面”，可以满足如消息提醒、任务完成、系统告警等多种业务场景。

本文将基于 electron-vite-vue 项目，介绍如何：

✅ 从渲染进程触发系统通知
✅ 在主进程监听通知点击事件
✅ 跳转应用内指定页面

📦 项目结构概览

electron-vite-vue/
├── electron/
│   ├── main/
│   │   └── notification.ts     ← 通知与点击逻辑
│   ├── preload/
│   │   └── index.ts            ← 暴露 sendNotification API
├── src/
│   ├── App.vue                 ← 触发按钮
│   ├── router/index.ts         ← 监听跳转

🔧 主进程：发送通知并监听点击

在 electron/main/notification.ts 中：

import { Notification, BrowserWindow, ipcMain } from 'electron'export function setupNotification(win: BrowserWindow) {ipcMain.on('notify-with-path', (_, { title, body, path }) => {const notification = new Notification({title,body,// @ts-ignoredata: path,})notification.on('click', () => {if (win.isMinimized()) win.restore()win.show()win.focus()const targetPath = notification.datawin.webContents.send('navigate-to', targetPath)})notification.show()})
}

并在主入口中引入：

import { setupNotification } from './notification'
setupNotification(win)

🛡️ preload 层：暴露 sendNotification 方法

在 electron/preload/index.ts 中：

contextBridge.exposeInMainWorld('electronAPI', {sendNotification: (title: string, body: string, path: string) => {ipcRenderer.send('notify-with-path', { title, body, path })},onNavigate: (cb: (path: string) => void) => {ipcRenderer.on('navigate-to', (_, path) => cb(path))}
})

🧪 渲染进程：发送通知 + 监听跳转

`App.vue`

<template><button @click="sendNotice">发送通知</button>
</template><script setup lang="ts">
function sendNotice() {window.electronAPI.sendNotification('有新消息','点击查看详情','/notice/detail/42')
}
</script>

🧭 Vue Router 中监听跳转事件

在 main.ts 或 App.vue 中：

import router from './router'window.electronAPI.onNavigate((path) => {router.push(path)
})

🧠 补充：通知权限处理建议

在首次发送通知前，可判断是否已有权限：

if (Notification.permission === 'granted') {new Notification('标题', { body: '内容' })
} else if (Notification.permission !== 'denied') {Notification.requestPermission().then(permission => {if (permission === 'granted') {new Notification('标题', { body: '内容' })}})
}