Как на Electron + Vue сделать маршрутизацию?

Рейтинг: 0Ответов: 0Опубликовано: 05.08.2023

Я делаю проект на Electron + Vue с бэкендом, у меня есть main.js где я создаю окно и запускаю бэкенд:

const { app, BrowserWindow } = require('electron');
const axios = require('axios');
const path = require('path');
const { exec } = require('child_process');
const waitOn = require('wait-on');
const { stderr } = require('process');

function createAuthWindow() {
    const authWindow = new BrowserWindow({
        width: 450,
        height: 600,
        webPreferences: {
            nodeIntegration: true
        },
        resizable: false,
        maximizable: false,
    });

     authWindow.webContents.on('did-finish-load', () => {
        authWindow.setTitle('DevPhoneLab - Authorization');
    });

    checkBackend();

    authWindow.loadURL('http://localhost:8080');

    // Удалить в продакшен версии
    authWindow.webContents.openDevTools();
}

app.whenReady().then(() => {
    waitOn({ resources: ['http://localhost:8080']}, (err) => {
        if (err) {
            console.error(`Error waiting for Vue.js: ${err.message}`)
        } else {
            createAuthWindow();
        }
    })

    exec('concurrently "cd frontend && npm run serve" "cd backend && npm run start"', (error, stdout, stderr) => {
        if (error) {
            console.error(`Error: ${error.message}`);
        }
    
        console.log(stdout);
        console.log(stderr);
    });
    
    app.on('activate', function() {
        if (BrowserWindow.getAllWindows().length === 0) createAuthWindow();
    });    
});

app.on('window-all-closed', function() {
    if (process.platform !== 'darwin') app.quit();
})

async function checkBackend() {
    try {
        const response = await axios.get('http://localhost:3000');
        if (response.status === 200) {
            console.log('Backend is running');
        }
    } catch (error) {
        console.log('Backend is not running');
    }
}

И есть два простых компонента, Authentification.vue и Main.vue которые импортируются в App.vue:

<template>
  <Authentification />
  <Main />
</template>

<script setup>
import Authentification from './src/components/Authentification.vue';
import Main from './src/components/Main.vue';
</script>

<style scoped lang="scss">

</style>

в Authentification.vue есть простая форма с кнопкой button type="submit".

Вопрос: Как мне при нажатии на кнопку сделать переход с компонента Authentification.vue на Main.vue? (Пока что простой переход нужен, без проверок и т.д).

На данный момент у меня отображаются сразу 2 компонента, мне нужен чтобы отображался первый, а при нажатии на кнопку, второй.

Ответы

Ответов пока нет.