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}`)
        }