用别人服务器做网站广东seo推广贵不贵
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: '内容' })}})
}
注意：Electron 无法跳转系统设置页面，需要用户手动开启通知权限。
✅ 总结
通过上述封装，我们实现了：
- ✅ 渲染进程安全调用系统通知
- ✅ 主进程监听通知点击并发出跳转事件
- ✅ Vue 路由完成页面跳转
该结构清晰、易扩展，适用于消息提醒、通知中心、工作流等 Electron 应用场景。
如需了解更多 Electron 通信结构封装，建议阅读：
👉 Electron IPC 通信三层封装实践
欢迎点赞、收藏、分享 🙌