fix: 顶部导航切换后内容区空白
<transition mode="out-in"> 包裹 router-view 时,首次导航后新视图 无法挂载(概览页首次加载正常、切换后所有页面含返回首页均空白, 且无 JS 报错)。改为默认过渡模式 + :key="route.path" 强制按路由 重挂载 + appear 首屏动画;路由改为同步导入简化实现。dev 与生产 构建均验证通过。
This commit is contained in:
@@ -35,8 +35,8 @@ onMounted(() => {
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<router-view v-slot="{ Component }">
|
<router-view v-slot="{ Component }">
|
||||||
<transition name="fade-slide" mode="out-in">
|
<transition name="fade-slide" appear>
|
||||||
<component :is="Component" />
|
<component :is="Component" :key="route.path" />
|
||||||
</transition>
|
</transition>
|
||||||
</router-view>
|
</router-view>
|
||||||
|
|
||||||
|
|||||||
@@ -1,12 +1,19 @@
|
|||||||
import { createRouter, createWebHistory } from 'vue-router'
|
import { createRouter, createWebHistory } from 'vue-router'
|
||||||
|
// 小面板仅 6 个页面,直接同步导入(无需代码分割)
|
||||||
|
import LoginView from '../views/LoginView.vue'
|
||||||
|
import OverviewView from '../views/OverviewView.vue'
|
||||||
|
import SearchView from '../views/SearchView.vue'
|
||||||
|
import ThresholdsView from '../views/ThresholdsView.vue'
|
||||||
|
import IgnoredView from '../views/IgnoredView.vue'
|
||||||
|
import LogsView from '../views/LogsView.vue'
|
||||||
|
|
||||||
const routes = [
|
const routes = [
|
||||||
{ path: '/login', name: 'login', component: () => import('../views/LoginView.vue'), meta: { public: true } },
|
{ path: '/login', name: 'login', component: LoginView, meta: { public: true } },
|
||||||
{ path: '/', name: 'overview', component: () => import('../views/OverviewView.vue') },
|
{ path: '/', name: 'overview', component: OverviewView },
|
||||||
{ path: '/search', name: 'search', component: () => import('../views/SearchView.vue') },
|
{ path: '/search', name: 'search', component: SearchView },
|
||||||
{ path: '/thresholds', name: 'thresholds', component: () => import('../views/ThresholdsView.vue') },
|
{ path: '/thresholds', name: 'thresholds', component: ThresholdsView },
|
||||||
{ path: '/ignored', name: 'ignored', component: () => import('../views/IgnoredView.vue') },
|
{ path: '/ignored', name: 'ignored', component: IgnoredView },
|
||||||
{ path: '/logs', name: 'logs', component: () => import('../views/LogsView.vue') },
|
{ path: '/logs', name: 'logs', component: LogsView },
|
||||||
{ path: '/:pathMatch(.*)*', redirect: '/' },
|
{ path: '/:pathMatch(.*)*', redirect: '/' },
|
||||||
]
|
]
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user