Browse Source

fix: 路由逻辑修改

master
guoapeng 3 months ago
parent
commit
61afe3f1ad
  1. 16
      src/pages/Index/Index.vue
  2. 28
      src/pages/Index/components/Consumables/TabBar.vue
  3. 8
      src/router/router.ts

16
src/pages/Index/Index.vue

@ -32,21 +32,21 @@
<router-link
to="/index/regular"
class="nav-tab"
:class="{ active: selectedTab === '常规' }"
:class="{ active: currentRoute.name === 'regular' }"
data-tab="常规"
>常规</router-link
>
<router-link
to="/index/history"
class="nav-tab"
:class="{ active: selectedTab === '历史' }"
:class="{ active: currentRoute.name === 'history'}"
data-tab="历史"
>历史</router-link
>
<router-link
to="/index/setting"
class="nav-tab"
:class="{ active: selectedTab === '设置' }"
:class="{ active: currentRoute.name === 'setting' }"
data-tab="设置"
>设置</router-link
>
@ -400,6 +400,12 @@ import CloseSvg from '@/assets/close-device.svg'
import LogoutSvg from '@/assets/user-logout.svg'
import CancelSvg from '@/assets/user-cancel.svg'
const router = useRouter()
//
const currentRoute = computed(() => router.currentRoute.value)
console.log(currentRoute.value)
const selectedTab = ref(sessionStorage.getItem('selectedTab') || '常规')
const lineWidth = ref(0)
const lineLeft = ref(0)
@ -548,7 +554,7 @@ const handleAppEvent = (data: AppEventMessage['data']) => {
}
//
const router = useRouter()
const onLogout = () => {
logout().then((res) => {
if(res.success){
@ -1316,5 +1322,5 @@ watch(
width: 11rem;
padding-top: 5px;
}
</style>

28
src/pages/Index/components/Consumables/TabBar.vue

@ -1,34 +1,23 @@
<template>
<div class="tab-bar">
<div v-for="(tab, index) in tabs" :key="index" :class="['tab-item', { active: currentTab === index }]"
<div v-for="(tab, index) in tabs" :key="index" :class="['tab-item', { active: currentTab.path === tab.url }]"
@click="onTabClick(index)">
<img class="tab-icon" :src="currentTab === index ? tab.activeIcon : tab.icon"></img>
<img class="tab-icon" :src="currentTab.path === tab.url ? tab.activeIcon : tab.icon"></img>
<span class="tab-label">{{ tab.label }}</span>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, onMounted, onActivated } from 'vue'
import { computed } from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
onActivated(() => {
const savedTab = sessionStorage.getItem('currentTab')
if (savedTab !== null) {
currentTab.value = parseInt(savedTab)
router.push(tabs[currentTab.value].url)
}
})
onMounted(() => {
const savedTab = sessionStorage.getItem('currentTab')
if (savedTab !== null) {
currentTab.value = parseInt(savedTab)
router.push(tabs[currentTab.value].url)
}
})
const currentTab = computed(() => router.currentRoute.value)
const tabs = [
{
label: '耗材',
@ -53,14 +42,11 @@ const tabs = [
},
]
// tab
const currentTab = ref(0)
const emit = defineEmits(['tabChanged'])
//
const onTabClick = (index: any) => {
currentTab.value = index
// tab sessionStorage
sessionStorage.setItem('currentTab', index)
router.push(tabs[index].url)
}
</script>

8
src/router/router.ts

@ -1,4 +1,4 @@
import { createRouter, createWebHistory } from 'vue-router'
import { createRouter, createWebHashHistory } from 'vue-router'
const routes = [
{
@ -15,6 +15,8 @@ const routes = [
},
{
path: 'regular', //常规
name: 'regular',
redirect: '/index/regular',
component: () => import('@/pages/Index/Regular.vue'),
children: [
{
@ -37,10 +39,12 @@ const routes = [
},
{
path: 'history',
name: 'history',
component: () => import('@/pages/Index/History.vue'),
},
{
path: 'setting',
name: 'setting',
component: () => import('@/pages/Index/Setting.vue'),
meta: { requiresAuth: true, requiresAdmin: true }, // 需要登录和 Admin 权限
children: [
@ -88,7 +92,7 @@ const routes = [
},
]
const router = createRouter({
history: createWebHistory(),
history: createWebHashHistory(),
routes,
})

Loading…
Cancel
Save