新窗口到电子vuejs应用程序与路由器模式散列

bvk5enib 于 2023-02-05 发布在 Vue.js

关注(0)|答案(2)|浏览(97)

在电子vuejs应用程序的上下文中，我需要在我的应用程序中使用许多窗口，就像网站中的模态。
为此，我创建了一个用于管理应用程序中的窗口/模态的服务。
在开始建立我的电子应用程序，我使用vue路由器与历史模式.
在这种模式路由器我所有的窗口运行像一个魅力

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

现在我使用哈希模式路由器（更多说明在这里）*

我的生产环境运行得很好

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

这是第一个安装的组件url，因为关联url是“/"。路由器不关心整个URL路径，如下所示：仅限于：网址：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路由器哈希模式，显示其他组件vue的内容比第一个安装的组件应用程序？*
技术信息：
电子：11.2.0
版本：2012年6月2日
开发环境：Webpack开发服务器（Webpack：第4.45.0节）

vue.js

来源：https://stackoverflow.com/questions/66816675/new-window-into-electron-vuejs-app-with-router-mode-hash

2条答案

按热度按时间

6psbrbz91#

我有同样的问题，新的电子窗口包含整个应用程序，而不是我在路由中指定的新页面。我不知道你有你的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()
  }
}

注意：这些Web首选项选项对于某些项目是安全问题，请检查：https://www.electronjs.org/docs/latest/tutorial/security

赞(0）回复(0）举报 2023-02-05

sqxo8psd2#

从以下位置导入组件时使用回调函数：
{路径：“/”，名称：“主要”，组件：需要（'@/components/Main. vue'）.默认值}，
收件人：{路径：“/”，名称：“主要”，组件：（）=〉需要（'@/组件/Main. vue'）.默认值}，

赞(0）回复(0）举报 2023-02-05