electron如何打开新页面的时候加载路由地址呢?

Question

项目是由vue-cli3加 vue add electron-builder 创建的,
electron的程序写在 background.js中

其他的页面和vuecli3创建的一样,现在需求是这样的 点击登录,打开新的窗口跳往主页路由并关闭原来的窗口

我现在该如何修改路由呢?

import { app, protocol, ipcMain, BrowserWindow } from 'electron';
import {
  createProtocol,
  // installVueDevtools,
} from 'vue-cli-plugin-electron-builder/lib';

const isDevelopment = process.env.NODE_ENV !== 'production';

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
let win;
let home;
// Scheme must be registered before the app is ready
protocol.registerSchemesAsPrivileged([{ scheme: 'app', privileges: { secure: true, standard: true } }]);

function createLoginWindow() {
  // Create the browser window.
  win = new BrowserWindow({
    width: 430,
    height: 330,
    frame: false,
    // resizable: false,
    maximizable: false,
    webPreferences: {
      nodeIntegration: true,
    },
  });

  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    win.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
    // if (!process.env.IS_TEST) win.webContents.openDevTools();
  } else {
    createProtocol('app');
    // Load the index.html when not in development
    win.loadURL('app://./index.html');
  }

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

function createHomeWindw() {
  home = new BrowserWindow({
    width: 282,
    height: 667,
    center: true,
    frame: false,
    // resizable: false,
    parent: win,
    show: false,
    modal: true,
    webPreferences: {
      nodeIntegration: true,
    },
  });
  if (process.env.WEBPACK_DEV_SERVER_URL) {
    // Load the url of the dev server if in development mode
    home.loadURL(process.env.WEBPACK_DEV_SERVER_URL);
    if (!process.env.IS_TEST) win.webContents.openDevTools();
  } else {
    createProtocol('app');
    // Load the index.html when not in development
    home.loadURL('app://./index.html');
  }
  // home.loadURL('http://www.baidu.com');
  home.on('closed', () => {
    home = null;
  })
  home.once('ready-to-show', () => {
    // win.hide()
    home.show()
  })
}


// 监听到关闭登陆主窗口,直接退出程序
ipcMain.on('close', () => {
  app.quit();
});
// 监听最小化主窗口
ipcMain.on('min', () => win.minimize());

// 监听登陆成功
ipcMain.on('login', () => {
  // if (home === null) {
  createHomeWindw();
  // home.show()
  // }
});

// Quit when all windows are closed.
app.on('window-all-closed', () => {
  // On macOS it is common for applications and their menu bar
  // to stay active until the user quits explicitly with Cmd + Q
  if (process.platform !== 'darwin') {
    app.quit();
  }
});


app.on('activate', () => {
  if (win === null) {
    createLoginWindow();
  }
});

app.on('ready', async () => {
  if (isDevelopment && !process.env.IS_TEST) {
    // Install Vue Devtools
    // Devtools extensions are broken in Electron 6.0.0 and greater
    // See https://github.com/nklayman/vue-cli-plugin-electron-builder/issues/378 for more info
    // Electron will not launch with Devtools extensions installed on Windows 10 with dark mode
    // If you are not using Windows 10 dark mode, you may uncomment these lines
    // In addition, if the linked issue is closed, you can upgrade electron and uncomment these lines
    // try {
    //   await installVueDevtools()
    // } catch (e) {
    //   console.error('Vue Devtools failed to install:', e.toString())
    // }

  }
  createLoginWindow();
});

// Exit cleanly on request from parent process in development mode.
if (isDevelopment) {
  if (process.platform === 'win32') {
    process.on('message', (data) => {
      if (data === 'graceful-exit') {
        app.quit();
      }
    });
  } else {
    process.on('SIGTERM', () => {
      app.quit();
    });
  }
}

Answer 1

这19年的问题，有人解决吗。能把解决方式贴一下吗。

---

这是国外网站的解决方法，试了一下，还是不好用，有没有人解答一下。
finally I could make window.loadUrl working for the production version as follows:

createProtocol('app');
window.loadURL(formatUrl({
   pathname: path.join(__dirname, 'index.html'),
   protocol: 'file',
   slashes: true
})); 

The above code is working but it only opens the login window which has the path '/' in the vue-router routes list.

To open a window for another route like '/main' I tried to append a hash and the route to the pathname like this:

window.loadURL(formatUrl({
  pathname: path.join(__dirname, 'index.html#', slug),
  protocol: 'file',
  slashes: true
})); 

but it did not work and on dev tools network tab I see this error:

Name: index.html%23/ Status: (blocked:other)

please advice

EDIT: all worked after adding the hash property to the options object passed to formatUrl instead of appending to the pathname manually:

window.loadURL(formatUrl({
   pathname: path.join(__dirname, 'index.html'),
   protocol: 'file',
   slashes: true,
   hash: slug
}));

Answer 2

大佬解决了吗，可以说下方法吗。