add the tab name to the route query

components/Layout/Parameters/Teaching.vue

@@ -0,0 +1,13 @@
+<template>
+  <LayoutContainer>
+    <i>Teaching</i>
+  </LayoutContainer>
+</template>
+
+<script setup lang="ts">
+
+</script>
+
+<style scoped lang="scss">
+
+</style>

pages/parameters/index.vue

@@ -5,11 +5,12 @@ Page Paramètres
   <LayoutContainer>
     <v-col cols="12" sm="12" md="12">
       <v-tabs
-          v-model="currentTab"
+          :model-value="currentTab"
           bg-color="primary"
           color="on-primary"
           :grow="true"
           density="default"
+          @update:model-value="onTabUpdate"
       >
         <v-tab v-for="tab in tabs" :value="tab">
           {{ $t(tab) }}
@@ -27,6 +28,7 @@ Page Paramètres
           </v-window-item>
 
           <v-window-item value="teaching">
+            <LayoutParametersTeaching />
           </v-window-item>
 
           <v-window-item value="intranet_access">
@@ -60,7 +62,6 @@ Page Paramètres
 </template>
 
 <script setup lang="ts">
-  const currentTab: Ref<string | null> = ref(null)
 
   const tabs = [
     'general_parameters',
@@ -76,6 +77,36 @@ Page Paramètres
     'super_admin',
   ]
 
+  const router = useRouter()
+  const route = useRoute()
+  let mounted = false
+
+  /**
+   * Update the current route's query with a new value for 'tab' parameter
+   * @param tab
+   */
+  const updateQuery = (tab: string) => {
+    router.replace({ query: { ...route.query, tab } })
+  }
+
+  const currentTab: Ref<string | null> = ref(null)
+
+  onMounted(() => {
+    console.log(route.query, route.query.tab, tabs.includes(route.query.tab as string))
+    if (!route.query || !route.query.tab || !tabs.includes(route.query.tab as string)) {
+      updateQuery(tabs[0])
+    }
+    currentTab.value = route.query.tab as string
+    mounted = true
+  })
+
+  const onTabUpdate = (tab: string) => {
+    if (!mounted) {
+      return
+    }
+    updateQuery(tab)
+    currentTab.value = tab
+  }
 </script>
 
 <style scoped lang="scss">