From 1a218aaa17161191ab43ffa99b2911bb8887095a Mon Sep 17 00:00:00 2001
From: Nelson Chan <chakflying@hotmail.com>
Date: Thu, 4 Nov 2021 22:12:52 +0800
Subject: [PATCH] Fix: Fix page transition & improve active handling
Fix: Fix current route parsing
---
src/pages/Settings.vue | 83 +++++++++++++++++++++---------------------
src/router.js | 7 ----
2 files changed, 42 insertions(+), 48 deletions(-)
diff --git a/src/pages/Settings.vue b/src/pages/Settings.vue
index 0cff13678..bacda3a38 100644
--- a/src/pages/Settings.vue
+++ b/src/pages/Settings.vue
@@ -1,46 +1,45 @@
<template>
- <transition name="slide-fade" appear>
- <div>
- <h1 v-show="show" class="mb-3">
- {{ $t("Settings") }}
- </h1>
+ <div>
+ <h1 v-show="show" class="mb-3">
+ {{ $t("Settings") }}
+ </h1>
- <div class="shadow-box">
- <div class="row">
- <div class="settings-menu">
- <router-link
- v-for="(item, key) in subMenus"
- :key="key"
- :to="`/settings/${item.path}`"
- >
- <div
- class="menu-item"
- :class="{ active: $route.name == `settings-${key}` }"
- >
- {{ item.title }}
- </div>
- </router-link>
+ <div class="shadow-box">
+ <div class="row">
+ <div class="settings-menu">
+ <router-link
+ v-for="(item, key) in subMenus"
+ :key="key"
+ :to="`/settings/${key}`"
+ >
+ <div class="menu-item">
+ {{ item.title }}
+ </div>
+ </router-link>
+ </div>
+ <div class="settings-content">
+ <div class="settings-content-header">
+ {{ subMenus[currentPage].title }}
</div>
- <div class="settings-content">
- <div class="settings-content-header">
- {{ subMenus[$route.name.split("-")[1]].title }}
- </div>
- <div class="mx-3">
- <router-view />
- </div>
+ <div class="mx-3">
+ <router-view v-slot="{ Component }">
+ <transition name="slide-fade" appear>
+ <component :is="Component" />
+ </transition>
+ </router-view>
</div>
</div>
</div>
</div>
- </transition>
+ </div>
</template>
<script>
-export default {
+import { useRoute } from "vue-router";
+export default {
data() {
return {
-
show: true,
settings: {},
@@ -49,36 +48,39 @@ export default {
subMenus: {
general: {
title: this.$t("General"),
- path: "general",
},
appearance: {
title: this.$t("Appearance"),
- path: "appearance",
},
notifications: {
title: this.$t("Notifications"),
- path: "notifications",
},
- monitorHistory: {
+ "monitor-history": {
title: this.$t("Monitor History"),
- path: "monitor-history",
},
security: {
title: this.$t("Security"),
- path: "security",
},
backup: {
title: this.$t("Backup"),
- path: "backup",
},
about: {
title: this.$t("About"),
- path: "about",
- }
+ },
},
};
},
+ computed: {
+ currentPage() {
+ let pathEnd = useRoute().path.split("/").at(-1);
+ if (pathEnd == "settings" || pathEnd == null) {
+ return "general";
+ }
+ return pathEnd;
+ },
+ },
+
mounted() {
this.loadSettings();
},
@@ -120,7 +122,6 @@ export default {
.shadow-box {
padding: 20px;
min-height: calc(100vh - 155px);
- max-height: calc(100vh - 30px);
}
footer {
@@ -154,7 +155,7 @@ footer {
}
}
- .menu-item.active {
+ .active .menu-item {
background: $highlight-white;
border-left: 4px solid $primary;
border-top-left-radius: 0;
diff --git a/src/router.js b/src/router.js
index 86615f890..a2414eb60 100644
--- a/src/router.js
+++ b/src/router.js
@@ -71,37 +71,30 @@ const routes = [
{
path: "general",
alias: "",
- name: "settings-general",
component: General,
},
{
path: "appearance",
- name: "settings-appearance",
component: Appearance,
},
{
path: "notifications",
- name: "settings-notifications",
component: Notifications,
},
{
path: "monitor-history",
- name: "settings-monitorHistory",
component: MonitorHistory,
},
{
path: "security",
- name: "settings-security",
component: Security,
},
{
path: "backup",
- name: "settings-backup",
component: Backup,
},
{
path: "about",
- name: "settings-about",
component: About,
},
]