perf/route (#54)

* perf: router

* perf: route

src/views/nested/menu1/index.vue

@@ -1,10 +1,35 @@
 <template>
   <div class="app-container">
     <p>{{ $t("message.hsmenu1") }}</p>
-    <router-view v-slot="{ Component }">
-      <transition>
-        <component :is="Component" />
-      </transition>
+    <router-view>
+      <template #default="{ Component, route }">
+        <transition appear name="fade-transform" mode="out-in">
+          <keep-alive
+            v-if="keepAlive"
+            :include="usePermissionStoreHook().cachePageList"
+          >
+            <component :is="Component" :key="route.fullPath" />
+          </keep-alive>
+          <component v-else :is="Component" :key="route.fullPath" />
+        </transition>
+      </template>
     </router-view>
   </div>
 </template>
+
+<script lang="ts">
+import { ref, getCurrentInstance } from "vue";
+import { usePermissionStoreHook } from "/@/store/modules/permission";
+export default {
+  name: "Menu1",
+  setup() {
+    const keepAlive: Boolean = ref(
+      getCurrentInstance().appContext.config.globalProperties.$config?.KeepAlive
+    );
+    return {
+      keepAlive,
+      usePermissionStoreHook
+    };
+  }
+};
+</script>

src/views/nested/menu1/menu1-1/index.vue

@@ -1,3 +1,18 @@
 <template>
-  <p style="text-indent: 2em">{{ $t("message.hsmenu1-1") }}</p>
+  <div>
+    <p style="text-indent: 2em">{{ $t("message.hsmenu1-1") }}</p>
+    <el-input v-model="input" />
+  </div>
 </template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+export default defineComponent({
+  name: "Menu1-1",
+  setup() {
+    return {
+      input: ref("")
+    };
+  }
+});
+</script>

src/views/nested/menu1/menu1-2/index.vue

@@ -1,10 +1,35 @@
 <template>
   <div>
     <p style="text-indent: 2em">{{ $t("message.hsmenu1-2") }}</p>
-    <router-view v-slot="{ Component }">
-      <keep-alive>
-        <component :is="Component" />
-      </keep-alive>
+    <router-view>
+      <template #default="{ Component, route }">
+        <transition appear name="fade-transform" mode="out-in">
+          <keep-alive
+            v-if="keepAlive"
+            :include="usePermissionStoreHook().cachePageList"
+          >
+            <component :is="Component" :key="route.fullPath" />
+          </keep-alive>
+          <component v-else :is="Component" :key="route.fullPath" />
+        </transition>
+      </template>
     </router-view>
   </div>
 </template>
+
+<script lang="ts">
+import { ref, getCurrentInstance } from "vue";
+import { usePermissionStoreHook } from "/@/store/modules/permission";
+export default {
+  name: "Menu1-2",
+  setup() {
+    const keepAlive: Boolean = ref(
+      getCurrentInstance().appContext.config.globalProperties.$config?.KeepAlive
+    );
+    return {
+      keepAlive,
+      usePermissionStoreHook
+    };
+  }
+};
+</script>

src/views/nested/menu1/menu1-2/menu1-2-1/index.vue

@@ -1,3 +1,18 @@
 <template>
-  <p style="text-indent: 4em">{{ $t("message.hsmenu1-2-1") }}</p>
+  <div>
+    <p style="text-indent: 4em">{{ $t("message.hsmenu1-2-1") }}</p>
+    <el-input v-model="input" />
+  </div>
 </template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+export default defineComponent({
+  name: "Menu1-2-1",
+  setup() {
+    return {
+      input: ref("")
+    };
+  }
+});
+</script>

src/views/nested/menu1/menu1-2/menu1-2-2/index.vue

@@ -1,3 +1,18 @@
 <template>
-  <p style="text-indent: 4em">{{ $t("message.hsmenu1-2-2") }}</p>
+  <div>
+    <p style="text-indent: 4em">{{ $t("message.hsmenu1-2-2") }}</p>
+    <el-input v-model="input" />
+  </div>
 </template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+export default defineComponent({
+  name: "Menu1-2-2",
+  setup() {
+    return {
+      input: ref("")
+    };
+  }
+});
+</script>

src/views/nested/menu1/menu1-3/index.vue

@@ -1,3 +1,18 @@
 <template>
-  <p style="text-indent: 2em">{{ $t("message.hsmenu1-3") }}</p>
+  <div>
+    <p style="text-indent: 2em">{{ $t("message.hsmenu1-3") }}</p>
+    <el-input v-model="input" />
+  </div>
 </template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+export default defineComponent({
+  name: "Menu1-3",
+  setup() {
+    return {
+      input: ref("")
+    };
+  }
+});
+</script>

src/views/nested/menu2/index.vue

@@ -1,3 +1,18 @@
 <template>
-  <p class="app-container">{{ $t("message.hsmenu2") }}</p>
+  <div class="app-container">
+    <p>{{ $t("message.hsmenu2") }}</p>
+    <el-input v-model="input" />
+  </div>
 </template>
+
+<script lang="ts">
+import { defineComponent, ref } from "vue";
+export default defineComponent({
+  name: "Menu2",
+  setup() {
+    return {
+      input: ref("")
+    };
+  }
+});
+</script>