feat(app): 优化页面切换动画并添加登录页缓存
- 在 App.vue 中添加路由中间件,控制页面切换动画方向 - 在 login 页面添加 keepalive 属性,提高性能和用户体验
This commit is contained in:
parent
23a127b0d3
commit
fb213caf28
@ -11,7 +11,7 @@ useHead({
|
|||||||
],
|
],
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const route = useRoute()
|
||||||
// 添加路由中间件来处理过渡方向
|
// 添加路由中间件来处理过渡方向
|
||||||
const router = useRouter()
|
const router = useRouter()
|
||||||
const slideDirection = ref('slide-left')
|
const slideDirection = ref('slide-left')
|
||||||
@ -37,7 +37,6 @@ if (to.path==='/'){
|
|||||||
|
|
||||||
// 提供过渡名称给页面组件
|
// 提供过渡名称给页面组件
|
||||||
provide('slideDirection', slideDirection)
|
provide('slideDirection', slideDirection)
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<template>
|
<template>
|
||||||
@ -50,7 +49,7 @@ provide('slideDirection', slideDirection)
|
|||||||
<NuxtLayout>
|
<NuxtLayout>
|
||||||
<NuxtPage :transition="{
|
<NuxtPage :transition="{
|
||||||
name: slideDirection
|
name: slideDirection
|
||||||
}"/>
|
}" keepalive />
|
||||||
</NuxtLayout>
|
</NuxtLayout>
|
||||||
</VanConfigProvider>
|
</VanConfigProvider>
|
||||||
</client-only>
|
</client-only>
|
||||||
|
@ -11,6 +11,7 @@ const router = useRouter();
|
|||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const { locale } = useI18n()
|
const { locale } = useI18n()
|
||||||
definePageMeta({
|
definePageMeta({
|
||||||
|
keepalive: true,
|
||||||
i18n: 'login.title'
|
i18n: 'login.title'
|
||||||
})
|
})
|
||||||
const loadingRef=ref({
|
const loadingRef=ref({
|
||||||
|
Loading…
Reference in New Issue
Block a user