Question

安装 vue-router 模块：

npm install vue-router@4 -D

安装完成后，为 src/renderer/router/index.ts 添加如下代码逻辑：

import * as VueRouter from 'vue-router';

// 路由规则数组
const routes = [{
  path: '/',
  redirect: '/WindowMain/Chat',
}, {
  path: '/WindowMain',
  component: () => import('../window/WindowMain.vue'),
  children: [{
    path: 'Chat',
    component: () => import('../window/WindowMain/Chat.vue'),
  }, {
    path: 'Contact',
    component: () => import('../window/WindowMain/Contact.vue'),
  }, {
    path: 'Collection',
    component: () => import('../window/WindowMain/Collection.vue'),
  },]
}, {
  path: '/WindowSetting',
  component: () => import('../window/WindowSetting.vue'),
  children: [
    {
      path: 'AccountSetting',
      component: () => import('../window/WindowSetting/AccountSetting.vue'),
    }
  ]
}, {
  path: '/WindowUserInfo',
  component: () => import('../window/WindowUserInfo.vue'),
}]

export let router = VueRouter.createRouter({
  history: VueRouter.createWebHistory(),
  routes,
});

这段代码导出了一个 router 对象，这个 router 对象是基于 WebHistory 模式创建路由的，也就是说页面路径看起来是这样的： http://127.0.0.1:5173/WindowMain/PageChat（开发环境），app://index.html/WindowMain/PageChat（生产环境）。

上述代码中 routes 数组里的内容就是导航的具体配置，在这些配置中使用 import 方法动态引入 Vue 组件，vite 在处理这种动态引入的组件时，会把对应的组件编译到独立的源码文件中，类似 WindowUserInfo.689249b8.js 和 WindowSetting.6354f6d6.js，这种编译策略可以帮助控制最终编译产物的大小，避免应用启动时就加载一个庞大的 JavaScript 文件。

在应用启动时请求的路径是："/"，这个路径被重定向到"/WindowMain/Chat"，也就是说 WindowMain 组件和 Chat 组件是首页组件（这是在第一个导航配置对象中设置的）。

上述代码完成后，需要在 main.ts 中使用它，代码如下：

import { createApp } from 'vue';
import './style.css';
import { router } from './router';
import App from './App.vue';

createApp(App).use(router).mount('#app');

接下来把 App.vue 的代码修改成如下内容：

<template>
  <router-view />
</template>

应用启动时，第一个窗口（主窗口）就会加载 src\renderer\window\WindowMain.vue 组件的代码。

当在主窗口内打开别的子窗口时（弹出一个子窗口），只要加载类似这样的路径/WindowUserInfo，就可以让子窗口加载 src\renderer\Window\WindowUserInfo.vue 这个组件。