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

问题现象

在路由中配置如下:

1
2
3
4
5
6
7
8
routes: [
{
path: '/pathA/:paramA',
name: 'path-a-page',
component: require('@/components/PathAPage').default
},
……
]

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
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


评论

Your browser is out-of-date!

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

×