Implement routes and transitions

packages/sshecret-frontend/src/views/secrets/SecretPage.vue

@@ -0,0 +1,32 @@
+<template>
+  <MasterDetail>
+    <template #master>
+      <MasterTabs selectedTab="secrets" @change="tabSelected" />
+    </template>
+    <template #detail>
+      <RouterView v-slot="{ Component, route }">
+        <transition name="fade" :css="false">
+          <component :is="Component" :key="route.path" />
+        </transition>
+      </RouterView>
+    </template>
+  </MasterDetail>
+</template>
+<script setup lang="ts">
+import { computed } from 'vue'
+import MasterDetail from '@/views/layout/MasterDetail.vue'
+import MasterTabs from '@/components/common/MasterTabs.vue'
+import { useRouter, useRoute } from 'vue-router'
+import { RouterView } from 'vue-router'
+
+const router = useRouter()
+const route = useRoute()
+
+function tabSelected(tabName: string) {
+  if (tabName !== 'secrets') {
+    router.push({ name: tabName })
+  }
+}
+
+const routeKey = computed(() => route.name + '-' + (route.params.id ?? 'root'))
+</script>