Tauri2.x实现系统菜单导航Vue路由

发布时间： 2025-09-21 16:37:14

更新时间： 2025-09-21 16:52:39

🕒 阅读时间：4 min read 👀 阅读量：Loading...

本文介绍如何在 Tauri 2 应用中使用系统菜单控制 Vue 路由切换。过程涉及在 Rust 后端设置菜单，并通过事件发射处理前端的路由变更。

方法

在应用启动时，在 src-tauri/src/lib.rs 中使用 Tauri’s MenuBuilder 配置菜单。添加菜单项如“Editor”、“About”和“Settings”，每个项有唯一 ID 如“nav-home”用于识别。

设置监听器处理菜单事件。当用户点击菜单项时，on_menu_event 被触发，根据菜单 ID 发射名为“change_router”的自定义事件，并附带相应路由路径作为数据。

1
mod commands;
2

3
use tauri::menu::MenuBuilder;
4
use tauri::Emitter;
5

6
#[cfg_attr(mobile, tauri::mobile_entry_point)]
7
pub fn run() {
8
    tauri::Builder::default()
9
        .plugin(tauri_plugin_opener::init())
10
        .invoke_handler(tauri::generate_handler![])
11
        .setup(|app| {
12
            let menu = MenuBuilder::new(app)
13
                .text("nav-home", "Editor")
14
                .text("nav-about", "About")
15
                .text("nav-settings", "Settings")
16
                .build()?;
17
            app.set_menu(menu.clone())?;
18
            app.on_menu_event(move |app_handle: &tauri::AppHandle, event| {
19
                println!("menu event: {:?}", event.id());
20
                match event.id().0.as_str() {
21
                    "nav-home" => {
22
                        println!("nav-home");
23
                        app_handle.emit("change_router", "/").unwrap()
24
                    }
25
                    "nav-about" => {
26
                        println!("nav-about");
27
                        app_handle.emit("change_router", "/about").unwrap()
28
                    }
29
                    "nav-settings" => {
30
                        println!("nav-settings");
31
                        app_handle.emit("change_router", "/settings").unwrap()
32
                    }
33
                    _ => {
34
                        println!("nothing")
35
                    }
36
                }
37
            });
38

39
            Ok(())
40
        })
41
        .run(tauri::generate_context!())
42
        .expect("error while running tauri application");
43
}

菜单是原生系统组件，因此在后端处理而非前端。事件发射实现了前后端的解耦，使前端专注于视图更新。

前端监听与响应

在前端 src/main.ts 中，使用 Vue Router 设置路由，包括首页、关于页和设置页。

关键是监听后端发来的“change_router”事件。收到事件后，调用 router.push({ path: event.payload }) 切换路由。使用对象格式传递路径，以符合 Vue Router 的类型要求，避免 TypeScript 类型错误。

1
import { createApp } from "vue";
2
import App from "./App.vue";
3
import { createMemoryHistory, createRouter } from "vue-router";
4
import { listen } from "@tauri-apps/api/event";
5
import Home from "./pages/Home.vue";
6
import About from "./pages/About.vue";
7
import Settings from "./pages/Settings.vue";
8

9
const routes = [
10
  { path: "/", component: Home },
11
  { path: "/about", component: About },
12
  { path: "/settings", component: Settings },
13
];
14

15
const router = createRouter({
16
  history: createMemoryHistory(),
17
  routes,
18
});
19

20
listen<String>("change_router", (event) => {
21
  console.log(event.payload);
22
  router.push({ path: event.payload });
23
});
24

25
createApp(App).use(router).mount("#app");

前端代码保持简洁，通过事件与后端通信，而不直接操作菜单。这种设计提高了模块化和可维护性。

效果

切换路由

在我Ubuntu 24.04LTS上的效果

完整过程

应用启动时，后端创建菜单并分配到窗口。当用户点击菜单项如“Editor”时，后端监听器检测事件并发射“change_router”事件，附带路径“/”。前端收到事件后，使用路由器更新视图为 Home 组件。过程高效，提供原生应用体验。

Tauri 2 与 Vue Router 的集成允许后端管理菜单，前端处理路由，通过事件实现通信。

题外话

TaurI前后端通信真好玩😋