Routing - digitalcityscience/TOSCA-2 GitHub Wiki

Routing (Vue Router)

This project uses Vue Router for managing client-side navigation. Vue Router enables dynamic routing, lazy loading, and navigation guards to enhance user experience.

Why Vue Router?

  • Dynamic Route Matching – Supports parameterized routes.
  • Named Views – Allows multiple router views in a single component.
  • Navigation Guards – Enables authentication and access control.
  • Lazy Loading – Improves performance by loading views only when needed.
  • History Mode Support – Uses modern URL-based navigation.

Router Structure

All route configurations are defined in src/router/index.ts.

📂 router
 ┣ 📜 index.ts  # Defines routes and navigation guards

Defining Routes

Routes are registered in index.ts:

import { createRouter, createWebHistory } from "vue-router";
import MapView from "../views/MapView.vue";
import { useParticipationStore } from "@store/participation";
import { useMapStore } from "@store/map";

const router = createRouter({
    history: createWebHistory(String(import.meta.env.VITE_BASE_URL)),
    routes: [
        {
            path: "/",
            name: "home",
            components: {
                default: MapView
            },
            meta: {
                sidebar: "workspaceListing",
                sidebarPosition:"left"
            }
        }
    ]
});

export default router;

Using Router in App.vue

Routing is handled inside App.vue using named views:

<script setup lang="ts">
import { RouterView } from "vue-router";
import { useMapStore } from "./store/map";
</script>

<template>
  <div class="app-container font-sans">
    <RouterView name="default"></RouterView>
    <RouterView v-if="useMapStore().map" name="participation"></RouterView>
  </div>
</template>

<style scoped>
.app-container {
    width: 100%;
    height: 100%;
}
</style>

Dynamic Routes & Route Parameters

Routes can include dynamic segments:

const routes = [
  { path: "campaign-detail/:campaignURL", name:"campaign-details", component: async () => await import("../components/Participation/CampaignDetail.vue"), props: true }
];

Access parameters in components:

<script setup>
import { useRoute } from 'vue-router';
const route = useRoute();
console.log(route.params. campaignURL);
</script>

Lazy Loading Routes

Improve performance by loading routes on demand:

const routes = [
  { path: "", name:"participation-home", component: async () => await import("../components/Participation/ParticipationHome.vue") },
];

Vue Router DevTools

Use Vue DevTools to inspect routes and navigation history.

For more information, see the Vue Router documentation.

⚠️ **GitHub.com Fallback** ⚠️