超详细!!!electron-vite-vue开发桌面应用之配置路由router(五)

云风网
云风笔记
云风知识库

一、安装依赖

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>

四、运行项目效果如下

点击标签相互路由跳转



相关推荐
mCell11 小时前
GSAP ScrollTrigger 详解
前端·javascript·动效
gnip11 小时前
Node.js 子进程:child_process
前端·javascript
codingandsleeping16 小时前
使用orval自动拉取swagger文档并生成ts接口
前端·javascript
白水清风17 小时前
微前端学习记录(qiankun、wujie、micro-app)
前端·javascript·前端工程化
用户221520442780018 小时前
new、原型和原型链浅析
前端·javascript
阿星做前端18 小时前
coze源码解读: space develop 页面
前端·javascript
叫我小窝吧18 小时前
Promise 的使用
前端·javascript
用户516816614584119 小时前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端康师傅19 小时前
JavaScript 作用域
前端·javascript
前端缘梦19 小时前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试