带有路由器模式哈希的 Electron vuejs 应用程序的新窗口

Posted 2023-03-22

【中文标题】带有路由器模式哈希的 Electron vuejs 应用程序的新窗口

【英文标题】：new window into Electron vuejs app with router mode hash

【发布时间】：2021-06-23 06:24:10

【问题描述】：

在 Electron vuejs 应用程序的上下文中，我需要在我的应用程序中使用许多窗口，例如网站中的模式。

为此，我创建了一个用于在我的应用程序中管理窗口/模式的服务。

在开始构建我的 Electron 应用程序时，我使用具有历史模式的 vue-router。

在这种模式下，我的所有窗口都像魅力一样运行

但是 我的电子生产环境不工作，因为我使用历史路由器模式。

现在我使用哈希模式路由器 (more explain here)

我的生产环境运行起来就像一个魅力

但是现在（这是这篇文章的主要内容！） 所有新建的内容窗口都是一样的。

它是第一个挂载的组件 url，因为关联的 url 是“/”。 路由器不关心这样的整个 URL 路径：http://localhost:8080/employee/edit/20 仅此：http://localhost:8080/

这是我启动窗口（模态）的代码：

createModal(type, params = null, event)

    this.browserWindow = this.createBrowserWindow()
    this.setURL(type, params)
    this.browserWindow.show()
    
    event.sender.send("modal-end", "yes")


createBrowserWindow()

    return new BrowserWindow(width: 650, height: 800, show: false, frame: true,
        webPreferences: 
            webSecurity: false,
            plugins: true,
            nodeIntegration: (process.env.ELECTRON_NODE_INTEGRATION),
            enableRemoteModule: true,
            // contextIsolation: false
    );


    if (process.env.WEBPACK_DEV_SERVER_URL)
    
        console.log('here modal url')
        console.log(process.env.WEBPACK_DEV_SERVER_URL + url)
        
        this.browserWindow.loadURL(process.env.WEBPACK_DEV_SERVER_URL + url)
        // this.browserWindow.loadURL("https://www.google.com");
        if (!process.env.IS_TEST) this.browserWindow.webContents.openDevTools()
    
    else
    
        createProtocol('app')
        this.browserWindow.loadURL('app://./index.html')
        // this.browserWindow.webContents.openDevTools()
        
    

你知道如何在 vue 框架和 vue-router HASH 模式下创建一个新的窗口电子吗 显示除第一个安装的组件应用程序之外的其他组件 vue 的内容？

技术信息：

电子：11.2.0 Vuejs：2.6.12 开发环境：Webpack 开发服务器（webpack：4.45.0）

【问题讨论】：

您找到解决方案了吗？我遇到了同样的问题，经过数小时的搜索，我完全陷入了困境。

【参考方案1】：

我遇到了同样的问题，即包含整个应用程序的新 Electron 窗口，而不是我在路线中指定的新页面。我不知道您是如何设置 App.vue 的，但在我的情况下，问题是应用页面需要更改为仅包含 <router-view></router-view> 然后您需要将其他所有内容移动到不同的页面并指向路由器到那个页面。像这样：

App.vue

<template>
  <div id="app">
    <router-view></router-view>
  </div>
</template>

<script>
  export default 
    name: 'my-app'
  
</script>

Main.js

<template>
  <div id="main">
    <Header />  
    <ComponentOne />
    <ComponentTwo />   
  </div>
</template>

<script>
import Header from './Header.vue'
import ComponentOne from "./ComponentOne.vue"
import ComponentTwo from './ComponentTwo.vue'

export default 
  name: 'main',
  components: 
    Header, 
    ComponentOne,
    ComponentTwo
  

</script>

Router.js

import  createWebHashHistory, createRouter  from 'vue-router'

const router = createRouter(
  history: createWebHashHistory(),
  routes: [
    
      path: '/',
      name: 'main',
      component: require('@/components/Main.vue').default
    ,
    
      path: '/set',
      name: 'Settings',
      component: require('@/components/Settings.vue').default
      
  ]
)
export default router

在 index.js 中，无论您在哪里设置菜单：

  label: 'Settings',
  click()          
    let win = new BrowserWindow( 
      width: 800, 
      height: 600, 
      webPreferences:  
          nodeIntegration: true,  
          contextIsolation: false
      
    )
    win.on('close', function ()  win = null )
    const setURL = process.env.NODE_ENV === 'development'
    ? 'http://localhost:9080/#/set'
    : `file://$__dirname/index.html#/set`     
    win.loadURL(setURL)
    win.show()
  

注意：这些网络偏好选项对于某些项目来说是一个安全问题，请检查：https://www.electronjs.org/docs/latest/tutorial/security