electron + vue3 路由新窗口

electron + vue3 路由新窗口

注意：不建议使用该方法，仅供参考

一、路由结构

​ 现假定有如下路由结构

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      name: 'home',
      component: Home
    },
    {
      path: '/page1',
      name: 'page1',
      component: Page1
    }
  ]
})

二、简单控制窗口

​ 简单实现窗口的创建与跨窗口销毁

<script lang="ts" setup>
import { useRouter } from 'vue-router'

const router = useRouter();
let openedWindow: Window | null;

/**
 * 导航到特定路由页面。
 * 
 * 该函数用于将当前的路由导航到'/page1'。它不接受任何参数，也不返回任何值。
 * 主要用于页面内的路由切换，以提供不同的页面内容。
 */
const toRoute: Function = (): void => {
  router.push('/page1')
  console.log('click to route.');
}

/**
 * 在新窗口打开特定路由页面。
 * 
 * 该函数用于打开一个新窗口，并在该窗口加载'/page1'页面。它不接受任何参数，也不返回任何值。
 * 主要用于需要在新窗口中显示页面的场景，例如打开帮助文档或用户协议。
 */
const toWindow: Function = (): void => {
  openedWindow = window.open("/page1")
  console.log('click to window.');
}

/**
 * 关闭之前打开的窗口。
 * 
 * 该函数用于关闭之前通过toWindow函数打开的窗口。它检查openedWindow变量是否定义，
 * 如果定义了，则调用窗口的close方法关闭窗口。该函数不接受任何参数，也不返回任何值。
 * 主要用于在用户完成相关操作后，清理之前打开的窗口，以避免内存泄漏或窗口堆积。
 */
const closeWindowByOtherPage: Function = (): void => {
  if (openedWindow) {
    openedWindow.close()
  }
}

/**
 * 弹出警告对话框。
 * 
 * 该函数无参数。
 * 
 * @returns {void} 无返回值。
 */
const showAlert: Function = (): void => {
  window.alert('ciallo world')
}
</script>

三、部分使用操作窗口方法

// 打开一个新的浏览器窗口或标签页
window.open('https://example.com', '_blank');

// 打开一个新窗口，设置宽度为800像素，高度为600像素
window.open("/page1", "_blank", "width=800,height=600");

// 关闭当前窗口
window.close();

// 显示一个警告对话框
window.alert('这是一个警告对话框');

// 显示一个确认对话框并返回用户点击的结果（布尔值）
const result = window.confirm('你确定要继续吗？');
if (result) {
  // 用户点击了“确定”
} else {
  // 用户点击了“取消”
}

// 显示一个提示对话框并返回用户输入的结果（字符串）
const userInput = window.prompt('请输入你的名字:');
if (userInput !== null) {
  // 用户输入了内容
} else {
  // 用户取消了输入
}

// 在指定的时间后执行代码（一次性定时器）
window.setTimeout(() => {
  console.log('3秒后执行');
}, 3000);

// 以指定的时间间隔重复执行代码（循环定时器）
const intervalId = window.setInterval(() => {
  console.log('每秒执行一次');
}, 1000);
// 可以使用 clearInterval 来停止定时器
window.clearInterval(intervalId);

// 使用 window.location 进行页面导航和获取 URL 信息
window.location.href = 'https://example.com';  // 重定向到另一个页面
console.log(window.location.pathname);  // 当前路径
console.log(window.location.search);  // 查询字符串
console.log(window.location.hash);  // 锚点

// 使用 localStorage 进行持久化存储
window.localStorage.setItem('key', 'value');  // 存储数据
const value = window.localStorage.getItem('key');  // 获取数据
window.localStorage.removeItem('key');  // 删除数据
window.localStorage.clear();  // 清除所有数据

// 使用 sessionStorage 进行会话存储
window.sessionStorage.setItem('key', 'value');  // 存储数据
const value = window.sessionStorage.getItem('key');  // 获取数据
window.sessionStorage.removeItem('key');  // 删除数据
window.sessionStorage.clear();  // 清除所有数据

// 滚动到指定的位置
window.scrollTo(0, 0);  // 滚动到页面顶部

// 使用 addEventListener 和 removeEventListener 进行事件监听和移除
const resizeHandler = () => {
  console.log('窗口大小改变');
};
window.addEventListener('resize', resizeHandler);  // 监听窗口大小改变事件
window.removeEventListener('resize', resizeHandler);  // 移除事件监听器

// 页面加载和卸载时触发的事件
window.onload = () => {
  console.log('页面已加载');
};
window.onunload = () => {
  console.log('页面卸载前');
};

// Electron 特定的窗口管理方法
const { remote } = require('electron');
const currentWindow = remote.getCurrentWindow();  // 获取当前窗口
currentWindow.maximize();  // 最大化窗口
currentWindow.minimize();  // 最小化窗口
currentWindow.close();  // 关闭窗口