Как на Electron + Vue сделать маршрутизацию?
Я делаю проект на 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 компонента, мне нужен чтобы отображался первый, а при нажатии на кнопку, второй.
Источник: Stack Overflow на русском