electron-vue:路由跳转
1.创建路由文件
src下创建文件夹router,并创建index.js文件
配置路由,创建router为hash模式
import { createRouter, createWebHashHistory} from 'vue-router';
import Home from '../views/Index.vue';
import SetConfig from '@/views/SetConfig.vue';
const routes = [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/setconfig',
name: 'SetConfig',
component: SetConfig
}
];
const router = createRouter({
history: createWebHashHistory(),
routes
});
export default router
2.App.vue创建路由入口
<template>
<div>
<router-view></router-view>
</div>
</template>
<script>
export default {
name: 'App',
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color:rgb(145, 135, 135);
margin-top: 20px;
}
ul {
margin: 0;
padding: 0;
}
div {
display: flex;
flex-direction: row;
}
</style>
3.main.js全局使用路由
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import router from './router'
console.log("start app")
//解决ResizeObserver loop limit exceeded问题
const debounce = (fn, delay) => {
let timer = null;
return function () {
let context = this;
let args = arguments;
clearTimeout(timer);
timer = setTimeout(function () {
fn.apply(context, args);
}, delay);
}
}
const _ResizeObserver = window.ResizeObserver;
window.ResizeObserver = class ResizeObserver extends _ResizeObserver{
constructor(callback) {
callback = debounce(callback, 16);
super(callback);
}
}
const app = createApp(App)
app.use(ElementPlus)
app.use(router)
app.mount('#app')
4.创建子窗口跳转路由
关键代码
args.route为需要跳转的路由
在dev模式下,使用访问本地服务器的形式
loadURL的参数要写成
http://localhost:8080/#/xxxx
在打包模式下,使用访问文件的方式
loadURL的参数要写成
app://./index.html#/xxxx
if (process.env.WEBPACK_DEV_SERVER_URL) {
// Load the url of the dev server if in development mode
// win.loadURL(process.env.WEBPACK_DEV_SERVER_URL)
console.log("dev env")
winURL = `http://localhost:8080/#${args.route}`
console.log("winURL", winURL)
if (!process.env.IS_TEST) win.webContents.openDevTools()
win.loadURL(winURL)
} else {
console.log("prod env")
createProtocol('app')
win.loadURL(`app://./index.html#${args.route}`)
}