2020-05-22

问题处理

2 分钟读完 (大约 315 个字) 0次访问

【问题处理】Electron-Vue 无法使用路由打开新窗口

问题现象

在路由中配置如下：

routes: [
    {
      path: '/pathA/:paramA',
      name: 'path-a-page',
      component: require('@/components/PathAPage').default
    },
    ……
  ]

在主进程中，使用如下方法创建新窗口

const pathAURL = process.env.NODE_ENV === 'development'
 ? `http://localhost:9080/pathA/`
 : `file://${__dirname}/index.html/pathA/`


let win = new BrowserWindow({
	height: mainWindow.width * 0.8,
	useContentSize: true,
	width: mainWindow.height * 0.8
})

win.setMenuBarVisibility(false)
win.loadURL(pathAURL + paramA)

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

实际效果如下，提示找不到路径
找不到页面

问题分析

经过查找资料，在Electron-Vue作者的回复中找到了答案。

Electron-Vue的路由默认是使用的hash模式（Vue Router默认就是hash模式），在该模式下，主页路径最后是会带有#。
例如：http://localhost:9080/#

因此，需要在路径中加入这个#，使路径完整。

解决方案

在主进程中，新窗口的路由路径改成如下

1
2
3

const pathAURL = process.env.NODE_ENV === 'development'
 ? `http://localhost:9080/#/pathA/`
 : `file://${__dirname}/index.html#pathA/`

如果想使用常规不带#的路径，那么就需要将路由配置改成history模式，具体参考Vue Router使用手册

参考

https://github.com/SimulatedGREG/electron-vue/issues/207
https://router.vuejs.org/zh/api/#mode

本文标题：【问题处理】Electron-Vue 无法使用路由打开新窗口
本文作者：车库Lab
本文链接：https://g-lab.xyz/2020/electron-vue-router-not-working-with-two-browserwindows/
发布时间：2020-05-22
版权声明：本博客所有文章除特别声明外，均采用 CC BY-NC-SA 4.0 许可协议。转载请注明出处！

# Electron-Vue, 前端, 问题处理

扫一扫点外卖更优惠

还有更多购物优惠等你来拿

文章

分类

标签

关注我

Your browser is out-of-date!

Update your browser to view this website correctly. Update my browser now