Is a Quasar "single active instance" of a component/page possible?

[waldoc89]

Hello, and help.

I have an app, which has a sidebar. The main dashboard (#/) page (Index.vue) sets variables in setup and initialize some interactive objects such as objects that include bluetooth connection.

I want to be able to navigate to a different page (#/differentPage) and go back to the main dashboard page without having my connection session objects detached (they do still run in the background).

I'm not sure what's the best way to approach this.

for a more visual representation of my question:

^ it might be resolved if the "simulator" component will be initialised once without unsetting itself. although thinking of this again, this approach will keep things "visually" running in the background and affect performance?
What's the best way to approach this situation?

This is src/App.vue:

<template>
	<router-view />
</template>
<script>
import { defineComponent } from "vue";

export default defineComponent({
	name: "App",
});
</script>

and this is the component that includes a reactive component that creates a session - Pages/Index.vue:

<template>
...
</template>

<script>
import { ref, reactive } from "vue";
import { useStore } from "vuex";
import Device from "../components/Device/Device.vue";
import ConnectDevices from "../components/Device/ConnectDevices.vue";
import Actions from "../components/Actions/Actions.vue";
import Logs from "../components/Logs.vue";
import Svg from "../components/Svg.vue";
import useSession from "../use/devices/useSession.vue";
import useDatabase from "../use/database/useDatabase";


export default {
	name: "Index",

	components: {
		Device,
		ConnectDevices,
		Logs,
		Actions,
		Svg,
	},

	setup() {
		let iot = {
			deviceName: ref("iot"),
			real: ref(true),
			connectionType: ref("serialport"),
			iotDeviceVersion: ref("A5"),
		};
		let gateway = {
			deviceName: ref("gateway"),
			real: ref(false),
			url: ref("ws://not-ready-yet:21098"),
		};
		let server = {
			deviceName: ref("server"),
			real: ref(false),
			url: ref("ws://172.20.0.5:21098"),
		};

		/* Logs init */
		let logs = ref([
			{
				ts: Date.now(),
				status: "success",
				data: "Select your device settings and connect! ",
				action: "read",
			},
		]);
		let clearLogs = () => {
			console.log("clear");
			logs.value = [];
		};

		/* Session init - connects to bluetooth with the input params */
		let session = reactive(useSession(server, gateway, iot, logs));

		/* SVG Chart */
		let store = useStore();
		let sampleData = store.state.sample.data;
		let sample2Data = store.state.sample2.data;
		let otherData = store.state.other.data;
		let svgMinMaxValue = ref(32768);

		return {
			iot,
			gateway,
			server,
			session,
			sampleData,
			otherData,
			store,
			svgMinMaxValue,
			useEdfGenerator,
			logs,
			clearLogs,
			sample2Data,
			clearAllTables,
		};
	},
	methods: {
		startSession() {
			/**
			 * Creates a session
			 */
			return this.session.create();
		}

};
</script>

routs.js:

const routes = [
	{
		path: "/",
		component: () => import("layouts/MainLayout.vue"),
		children: [
			{
				path: "",
				component: () => import("pages/Index.vue"),
			},
			{
				path: "logs",
				component: () => import("pages/LogsPage.vue"),
			},
		],
	},
	{
		path: "/:catchAll(.*)*",
		component: () => import("pages/Error404.vue"),
	},
];

export default routes;

and the standard MainLayout.vue page:

<template>
	<q-layout view="lHh Lpr lFf">
		<q-header elevated>
			<q-toolbar>
				<q-btn
					flat
					dense
					round
					icon="menu"
					aria-label="Menu"
					@click="toggleLeftDrawer"
				/>
				<q-toolbar-title> Developer Tools </q-toolbar-title>

				<div>ertertert</div>
			</q-toolbar>
		</q-header>

		<q-drawer v-model="leftDrawerOpen" show-if-above bordered>
			<q-list>
				<q-item-label header> Essential Links </q-item-label>

				<EssentialLink
					v-for="link in essentialLinks"
					:key="link.title"
					v-bind="link"
				/>
			</q-list>
		</q-drawer>

		<q-page-container>
			<router-view />
		</q-page-container>
	</q-layout>
</template>

<script>
import EssentialLink from "components/EssentialLink.vue";

const linksList = [
	{
		title: "Dashboard",
		caption: "Dashboard",
		icon: "videogame_asset",
		link: "#/",
	},
	{
		title: "Logs",
		caption: "Logs",
		icon: "chat",
		link: "#/logs",
	},
];

import { defineComponent, ref } from "vue";

export default defineComponent({
	name: "MainLayout",

	components: {
		EssentialLink,
	},

	setup() {
		const leftDrawerOpen = ref(false);

		return {
			essentialLinks: linksList,
			leftDrawerOpen,
			toggleLeftDrawer() {
				leftDrawerOpen.value = !leftDrawerOpen.value;
			},
		};
	},
});
</script>