App.vue 982 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051
  1. <template>
  2. <div id="app">
  3. <router-view v-slot="{ Component }">
  4. <keep-alive :include="keepAliveIncludes">
  5. <component :is="Component" />
  6. </keep-alive>
  7. </router-view>
  8. <Login v-model:dialogVisible="useUserInfoStore.loginShow" />
  9. </div>
  10. </template>
  11. <script setup lang="ts">
  12. import { useRoute, useRouter } from 'vue-router'
  13. import Login from '@/components/login/index.vue';
  14. import useUserInfo from "@/stores/modules/user";
  15. const useUserInfoStore = useUserInfo();
  16. const router = useRouter()
  17. const route = useRoute()
  18. /* keep alive 的路由名称 */
  19. const keepAliveIncludes = router
  20. .getRoutes()
  21. .filter((router) => router.meta?.keepAlive)
  22. .map((router) => router.name as string)
  23. </script>
  24. <style scoped>
  25. .logo {
  26. height: 6em;
  27. padding: 1.5em;
  28. will-change: filter;
  29. transition: filter 300ms;
  30. }
  31. .logo:hover {
  32. filter: drop-shadow(0 0 2em #646cffaa);
  33. }
  34. .logo.vue:hover {
  35. filter: drop-shadow(0 0 2em #42b883aa);
  36. }
  37. </style>