Fix: 修正重定向逻辑 & 使用Pinia管理状态

This commit is contained in:
2025-07-16 15:51:34 +08:00
parent bdb02fd147
commit 9720bf05c6
6 changed files with 110 additions and 10 deletions

View File

@ -159,11 +159,22 @@
import { computed, onMounted, onUnmounted, ref } from 'vue' import { computed, onMounted, onUnmounted, ref } from 'vue'
import { useI18n } from 'vue-i18n' import { useI18n } from 'vue-i18n'
import { navigationConfig } from '@/config/navigation' import { navigationConfig } from '@/config/navigation'
import { useNavigationStore } from '@/stores/navigation'
import { useRoute } from 'vue-router'
const { t, locale } = useI18n() const { t, locale } = useI18n()
const route = useRoute()
const navigationStore = useNavigationStore()
const drawer = computed({
get: () => navigationStore.drawer,
set: (value: boolean) => {
navigationStore.setDrawerOpen(value)
},
})
const selectedIndex = computed(() => navigationStore.selectedIndex)
const drawer = ref(true)
const selectedIndex = ref(0)
const windowWidth = ref(typeof window === 'undefined' ? 1200 : window.innerWidth) const windowWidth = ref(typeof window === 'undefined' ? 1200 : window.innerWidth)
const showAboutDialog = ref(false) const showAboutDialog = ref(false)
@ -260,7 +271,6 @@
} }
function handleSelect (index: number) { function handleSelect (index: number) {
selectedIndex.value = index
drawer.value = false // 选择后自动关闭抽屉 drawer.value = false // 选择后自动关闭抽屉
} }

View File

@ -69,5 +69,6 @@
"appDescription": "Paper tube production auxiliary production tool provides calculation of various parameters such as weight, size, angle, etc.", "appDescription": "Paper tube production auxiliary production tool provides calculation of various parameters such as weight, size, angle, etc.",
"allRightsReserved": "All Rights Reserved", "allRightsReserved": "All Rights Reserved",
"close": "Close", "close": "Close",
"officialWebsite": "Official website" "officialWebsite": "Official website",
"loading": "Loading"
} }

View File

@ -69,5 +69,6 @@
"appDescription": "纸管制作辅助生产工具,提供纸管重量、尺寸、角度等多种参数的计算。", "appDescription": "纸管制作辅助生产工具,提供纸管重量、尺寸、角度等多种参数的计算。",
"allRightsReserved": "版权所有", "allRightsReserved": "版权所有",
"close": "关闭", "close": "关闭",
"officialWebsite": "官方网站" "officialWebsite": "官方网站",
"loading": "加载中"
} }

View File

@ -1,15 +1,48 @@
<template> <template>
<div>Redirecting...</div> <v-container class="d-flex justify-center align-center" style="min-height: 50vh;">
<div class="text-center">
<v-progress-circular
color="primary"
indeterminate
size="64"
width="6"
/>
<div class="text-h6 mt-4 text-primary">
{{ $t('loading') }}...
</div>
</div>
</v-container>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import { onMounted } from 'vue' import { onMounted } from 'vue'
import { useRouter } from 'vue-router' import { useRoute, useRouter } from 'vue-router'
const router = useRouter() const router = useRouter()
const route = useRoute()
onMounted(() => { onMounted(async () => {
// Redirect to the calculators page // 等待路由完全准备好
router.push('/calculators/paper-tube-weight') await router.isReady()
// 检查是否是直接访问首页
const isDirectAccess = route.path === '/' && !document.referrer.includes(window.location.origin)
let targetPath = '/calculators/paper-tube-weight' // 默认路径
if (!isDirectAccess) {
// 如果不是直接访问,尝试恢复上次的路径
const lastRoute = sessionStorage.getItem('lastRoute')
const savedPath = localStorage.getItem('lastPath')
targetPath = lastRoute || savedPath || targetPath
}
// 使用 replace 避免在历史记录中留下首页
router.replace(targetPath)
}) })
</script> </script>
<route lang="yaml">
meta:
layout: CalculatorLayout
</route>

View File

@ -33,4 +33,28 @@ router.isReady().then(() => {
localStorage.removeItem('vuetify:dynamic-reload') localStorage.removeItem('vuetify:dynamic-reload')
}) })
router.beforeEach((to, from, next) => {
// 如果访问根路径且不是直接输入地址访问
if (to.path === '/' && from.path !== '/') {
// 检查是否有保存的路径
const lastRoute = sessionStorage.getItem('lastRoute')
const savedPath = localStorage.getItem('lastPath')
if (lastRoute || savedPath) {
// 重定向到上次访问的页面
next(lastRoute || savedPath || '/calculators/paper-tube-weight')
return
}
}
// 保存当前路由(非首页)
if (to.path !== '/') {
sessionStorage.setItem('lastRoute', to.fullPath)
localStorage.setItem('lastPath', to.fullPath)
}
next()
})
export default router export default router

31
src/stores/navigation.ts Normal file
View File

@ -0,0 +1,31 @@
import { defineStore } from 'pinia'
import { computed, ref } from 'vue'
import { useRoute } from 'vue-router'
import { navigationConfig } from '@/config/navigation'
export const useNavigationStore = defineStore('navigation', () => {
// Status
const route = useRoute()
const drawer = ref(false)
// 当前选中的菜单项
const selectedIndex = computed(() => {
return navigationConfig.findIndex(item => item.to === route.path)
})
// Actions
function toggleDrawer () {
drawer.value = !drawer.value
}
function setDrawerOpen (open: boolean) {
drawer.value = open
}
return {
selectedIndex,
drawer,
toggleDrawer,
setDrawerOpen,
}
})