electron-vue当中win.loadURL弹窗问题解决

在electron-vue项目中,当vue-router的单页面应用无法满足弹窗需求时,可以采用两种方法。第一种是结合vue-router使用window.open(),第二种是通过window.location.href直接访问路由。详细代码和解释说明了如何在弹窗中正确加载URL。
摘要由CSDN通过智能技术生成

在electron+vue脚手架项目当中,vue+vue-router一般应用于单页面应用程序,如果是弹窗的话,一般用的都是“dialog”,但是“dialog”不能满足我们特定的需求,基于原生弹窗有两种方式。

第一种方式:

window.open(url,name,specs,replace)

那么window.open()方法和vue-router怎么进行结合呢?代码如下:

const {href} = this.$router.resolve({
     name: "statistics-explain",
      params: {
           classID: id,
           examSubjectID: this.planClassData.examSubjectID,
           
当将已有的Vue项目使用electron-vue进行打包时,您可以按照以下步骤进行操作: 1. 安装 electron-vue 脚手架工具: ``` npm install -g vue-cli vue init simulatedgreg/electron-vue my-project ``` 2. 进入项目目录: ``` cd my-project ``` 3. 安装依赖: ``` npm install ``` 4. 添加 Vue 项目的主进程代码: 在 `src/main` 目录下创建 `index.js` 文件,并添加以下内容: ```javascript import { app, BrowserWindow } from 'electron' let mainWindow function createWindow() { mainWindow = new BrowserWindow({ width: 800, height: 600, webPreferences: { nodeIntegration: true } }) mainWindow.loadURL(process.env.NODE_ENV === 'development' ? 'http://localhost:8080' : `file://${__dirname}/index.html`) mainWindow.on('closed', () => { mainWindow = null }) } app.on('ready', createWindow) app.on('window-all-closed', () => { if (process.platform !== 'darwin') { app.quit() } }) app.on('activate', () => { if (mainWindow === null) { createWindow() } }) ``` 5. 修改 `package.json` 文件: 在 `scripts` 段中增加以下两行代码: ```json "electron:serve": "cross-env NODE_ENV=development electron .", "electron:build": "vue-cli-service electron:build" ``` 6. 运行开发环境: ``` npm run electron:serve ``` 7. 构建应用程序: ``` npm run electron:build ``` 8. 完成后,您将在 `dist_electron` 目录中找到生成的应用程序。 请注意,上述步骤假设您已经安装了 Vue CLI 和 Node.js。希望对您有所帮助!
评论 5
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值