超详细！！！electron-vite-vue开发桌面应用之配置路由router（五）
云风网
云风笔记
云风知识库
一、安装依赖
npm install vue-router
二、配置项目文件路径
三、配置路由router
在src下新建一个router目录，然后在里面添加一个index.ts文件，在里面配置路由
import { createRouter, createWebHashHistory } from 'vue-router'const router = createRouter({// hash 模式。history: createWebHashHistory (),routes: [// 设置首页{path: '/',component: () => import('@/views/index.vue')},{ path: '/userManage', // 配置用户管理component: () => import('@/views/userManage/index.vue') },{ path: '/noteManage', // 配置语录管理component: () => import('@/views/noteManage/index.vue') }],
})export default router在src下的main.ts中引入路由
import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import router from './router'
const app = createApp(App)
// 配置路由
app.use(router)
app.mount('#app').$nextTick(() => {// Use contextBridgewindow.ipcRenderer.on('main-process-message', (_event, message) => {console.log(message)})
})
在App.vue中使用路由
<template><router-view></router-view>
</template>
四、运行项目效果如下
点击标签相互路由跳转
