electron+vue3全家桶+vite项目搭建【四】集成vue-router

引入

视频讲解
demo项目地址

vue-router官网

单页面应用肯定少不了路由，这一节咱们就来集成一下vue-router

1.引入依赖

npm install vue-router@4

2.配置vue-router

1.首先我们新建一个Demo目录，里面放一个Index.vue用作demo组件的入口文件

// demo/Index.vue

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

// src\router\index.ts
import { createRouter, createWebHashHistory } from 'vue-router'

const router = createRouter({
  //  hash 模式。
  history: createWebHashHistory(),
  routes: [
    // 设置首页
    {
      path: '/',
      component: () => import('../components/demo/Index.vue')
    },
    // 配置helloworld页的路径
    { 
      path: '/hello', 
      component: () => import('../components/HelloWorld.vue') 
    },
  ],
})

export default router

3.src下的main.ts中use我们的路由配置

// src\main.ts
import { createApp } from 'vue'
import "./style.css"
import App from './App.vue'
import './samples/node-api'
import router from './router'

const app = createApp(App)

// 配置路由
app.use(router)

app.mount('#app')
  .$nextTick(() => {
    postMessage({ payload: 'removeLoading' }, '*')
  })

4.App.vue文件删除原来的内容，我们直接补充一个 router-view

// src\App.vue

5.运行项目测试效果：

3.路由跳转

我们调整demo/Index.vue的内容：

HelloWorld.vue中补充一个返回上一级路由的按钮：

运行显示如下：