超详细!!!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>

四、运行项目效果如下

点击标签相互路由跳转



相关推荐
梦鱼17 分钟前
Vue 项目图标一把梭:Iconify 自用小记(含 TS/JS 双版本组件)
前端·javascript·vue.js
给月亮点灯|25 分钟前
Vue基础知识-脚手架开发-初始化目录解析
前端·javascript·vue.js
周小码32 分钟前
CesiumJS详解:打造专业级Web 3D地球仪与地图的JavaScript库
前端·javascript·3d
哆啦A梦158836 分钟前
Element-Plus
前端·vue.js·ts
前端小巷子1 小时前
JS 打造丝滑手风琴
前端·javascript·面试
Mintopia1 小时前
多模态 AIGC 在 Web 内容创作中的技术融合实践:把“创作引擎”装进浏览器
前端·javascript·aigc
Mintopia2 小时前
Next.js 的 Web Vitals 监测与 Lighthouse 分析:从底层到实战的快乐科学
前端·javascript·next.js
一枚前端小能手2 小时前
「周更第2期」实用JS库推荐:Rsbuild
前端·javascript
小桥风满袖2 小时前
极简三分钟ES6 - 正则表达式的扩展
前端·javascript
柯南二号2 小时前
【大前端】React 使用 Redux 实现组件通信的 Demo 示例
前端·javascript·react.js