electron 如何在新窗口加载vue3的vue-router的指定的路由?

在 Electron 中加载 Vue Router 的指定路由

1. 主进程 (main.js)

在 Electron 主进程中正确加载 Vue Router 路由，支持开发与生产环境：

const { app, BrowserWindow } = require('electron');
const path = require('path');
const isDev = process.env.NODE_ENV === 'development';

function createWindow() {
  const mainWindow = new BrowserWindow({
    width: 800,
    height: 600,
    webPreferences: {
      preload: path.join(__dirname, 'preload.js'),
      contextIsolation: true,
      enableRemoteModule: false,
    },
  });

  const loadMainWindow = async () => {
    try {
      if (isDev) {
        await mainWindow.loadURL('http://localhost:8080/#/your-route');
      } else {
        await mainWindow.loadFile(path.resolve(__dirname, 'dist', 'index.html'), {
          hash: '#/your-route',
        });
      }
    } catch (error) {
      console.error('Failed to load the window:', error);
      app.quit();
    }
  };

  loadMainWindow();

  mainWindow.on('closed', () => {
    mainWindow = null;
  });
}

app.on('ready', createWindow);

2. Vue Router 配置 (router/index.js)

保证Vue Router 在 Electron 环境中正确运行，使用 createWebHashHistory 避免路径解析问题：

import { createRouter, createWebHashHistory } from 'vue-router';

const routes = [
  { path: '/', component: () => import('../components/Home.vue') },
  { path: '/your-route', component: () => import('../components/YourComponent.vue') },
];

const router = createRouter({
  history: createWebHashHistory(),
  routes,
});

// 添加导航守卫，防止未授权访问
router.beforeEach((to, from, next) => {
  console.log(`Navigating to: ${to.path}`);
  next();
});

export default router;

3. Vue 根组件 (App.vue)

Vue 应用的入口，作为路由视图的容器：

<!-- App.vue -->
<template>
  <router-view></router-view>
</template>

<script>
export default {
  name: 'App'
};
</script>

4. Vue 组件中的导航 (components/ExampleComponent.vue)

在 Vue 组件中使用 声明式导航 (router-link) 和 程序化导航 (router.push)：

<!-- ExampleComponent.vue -->
<template>
  <div>
    <router-link to="/your-route" active-class="active">Go to Your Route</router-link>
    <button @click="navigateToRoute">Navigate Programmatically</button>
  </div>
</template>

<script>
import { useRouter } from 'vue-router';

export default {
  setup() {
    const router = useRouter();

    function navigateToRoute() {
      router.push('/your-route');
    }

    return { navigateToRoute };
  }
};
</script>

<style scoped>
.active {
  font-weight: bold;
  color: blue;
}
</style>

5. Preload 脚本 (preload.js)

在 Electron 中使用 contextBridge 进行安全的数据通信：

const { contextBridge, ipcRenderer } = require('electron');

contextBridge.exposeInMainWorld('electronAPI', {
  sendMessage: (channel, data) => {
    ipcRenderer.send(channel, data);
  },
});

使用说明

开发环境

🔹 运行 npm run dev 启动前端开发服务器（监听 http://localhost:8080）。
🔹 设置 NODE_ENV=development。

生产环境

🔹 确定好已打包前端代码（dist 目录）。
🔹 使用 electron-builder 打包 Electron 应用。

运行

🔹 运行 electron . 启动应用，自动加载 #/your-route 路由。
🔹 通过 按钮 或 链接 触发导航。