超详细！！！electron-vite-vue开发桌面应用之配置路由router（五）

niech_cn2024-08-15 15:21

一、安装依赖

javascript 复制代码

npm install vue-router

二、配置项目文件路径

三、配置路由router

在src下新建一个router目录，然后在里面添加一个index.ts文件，在里面配置路由

javascript 复制代码

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中引入路由

javascript 复制代码

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 contextBridge
  window.ipcRenderer.on('main-process-message', (_event, message) => {
    console.log(message)
  })
})

在App.vue中使用路由

javascript 复制代码

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

四、运行项目效果如下

点击标签相互路由跳转