修正tab路由参数为query,解决原先采用params路由参数时导致主菜单选中状态不同步的问题

This commit is contained in:
Allen
2024-05-31 11:18:44 +08:00
parent 3ffe354770
commit 3321427eb4
7 changed files with 48 additions and 24 deletions
@@ -85,14 +85,14 @@ const superUser = store.state.auth.superUser
:item="{ :item="{
title: '电影', title: '电影',
icon: 'mdi-movie-check-outline', icon: 'mdi-movie-check-outline',
to: '/subscribe-movie/mysub', to: '/subscribe-movie?tab=mysub',
}" }"
/> />
<VerticalNavLink <VerticalNavLink
:item="{ :item="{
title: '电视剧', title: '电视剧',
icon: 'mdi-television-classic', icon: 'mdi-television-classic',
to: '/subscribe-tv/mysub', to: '/subscribe-tv?tab=mysub',
}" }"
/> />
<VerticalNavLink <VerticalNavLink
@@ -144,7 +144,7 @@ const superUser = store.state.auth.superUser
:item="{ :item="{
title: '插件', title: '插件',
icon: 'mdi-apps', icon: 'mdi-apps',
to: '/plugins/installed', to: '/plugins?tab=installed',
}" }"
/> />
<VerticalNavLink <VerticalNavLink
@@ -160,7 +160,7 @@ const superUser = store.state.auth.superUser
:item="{ :item="{
title: '设定', title: '设定',
icon: 'mdi-cog', icon: 'mdi-cog',
to: '/setting/account', to: '/setting?tab=account',
}" }"
/> />
</template> </template>
+1 -1
View File
@@ -89,7 +89,7 @@ const avatar = store.state.auth.avatar
<VDivider class="my-2" /> <VDivider class="my-2" />
<!-- 👉 Profile --> <!-- 👉 Profile -->
<VListItem v-if="superUser" link to="setting"> <VListItem v-if="superUser" link @click="router.push('/setting?tab=account')">
<template #prepend> <template #prepend>
<VIcon class="me-2" icon="mdi-account-outline" size="22" /> <VIcon class="me-2" icon="mdi-account-outline" size="22" />
</template> </template>
+8 -2
View File
@@ -1,5 +1,6 @@
<script lang="ts" setup> <script lang="ts" setup>
import { useRoute } from 'vue-router' import { useRoute } from 'vue-router'
import router from '@/router'
import AccountSettingAccount from '@/views/setting/AccountSettingAccount.vue' import AccountSettingAccount from '@/views/setting/AccountSettingAccount.vue'
import AccountSettingNotification from '@/views/setting/AccountSettingNotification.vue' import AccountSettingNotification from '@/views/setting/AccountSettingNotification.vue'
import AccountSettingSite from '@/views/setting/AccountSettingSite.vue' import AccountSettingSite from '@/views/setting/AccountSettingSite.vue'
@@ -13,7 +14,7 @@ import AccountSettingDirectory from '@/views/setting/AccountSettingDirectory.vue
const route = useRoute() const route = useRoute()
const activeTab = ref(route.params.tab) const activeTab = ref(route.query.tab)
// tabs // tabs
const tabs = [ const tabs = [
@@ -68,12 +69,17 @@ const tabs = [
tab: 'about', tab: 'about',
}, },
] ]
// 跳转tab
function jumpTab(tab: string) {
router.push("/setting?tab=" + tab)
}
</script> </script>
<template> <template>
<div> <div>
<VTabs v-model="activeTab" show-arrows class="v-tabs-pill"> <VTabs v-model="activeTab" show-arrows class="v-tabs-pill">
<VTab v-for="item in tabs" :key="item.icon" :value="item.tab" :to="'/setting/' + item.tab"> <VTab v-for="item in tabs" :key="item.icon" :value="item.tab" @click="jumpTab(item.tab)">
<VIcon size="20" start :icon="item.icon" /> <VIcon size="20" start :icon="item.icon" />
{{ item.title }} {{ item.title }}
</VTab> </VTab>
+8 -2
View File
@@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import SubscribeListView from '@/views/subscribe/SubscribeListView.vue' import SubscribeListView from '@/views/subscribe/SubscribeListView.vue'
import SubscribePopularView from '@/views/subscribe/SubscribePopularView.vue' import SubscribePopularView from '@/views/subscribe/SubscribePopularView.vue'
import router from '@/router'
const route = useRoute() const route = useRoute()
@@ -17,13 +18,18 @@ const tabs = [
] ]
// 当前标签 // 当前标签
const activeTab = ref(route.params.tab) const activeTab = ref(route.query.tab)
// 跳转tab
function jumpTab(tab: string) {
router.push("/subscribe-movie?tab=" + tab)
}
</script> </script>
<template> <template>
<div> <div>
<VTabs v-model="activeTab"> <VTabs v-model="activeTab">
<VTab v-for="item in tabs" :value="item.tab" :to="'/subscribe-movie/' + item.tab"> <VTab v-for="item in tabs" :value="item.tab" @click="jumpTab(item.tab)">
<span class="mx-5">{{ item.title }}</span> <span class="mx-5">{{ item.title }}</span>
</VTab> </VTab>
</VTabs> </VTabs>
+8 -2
View File
@@ -1,6 +1,7 @@
<script setup lang="ts"> <script setup lang="ts">
import SubscribeListView from '@/views/subscribe/SubscribeListView.vue' import SubscribeListView from '@/views/subscribe/SubscribeListView.vue'
import SubscribePopularView from '@/views/subscribe/SubscribePopularView.vue' import SubscribePopularView from '@/views/subscribe/SubscribePopularView.vue'
import router from '@/router'
const route = useRoute() const route = useRoute()
@@ -17,13 +18,18 @@ const tabs = [
] ]
// 当前标签 // 当前标签
const activeTab = ref(route.params.tab) const activeTab = ref(route.query.tab)
// 跳转tab
function jumpTab(tab: string) {
router.push("/subscribe-tv?tab=" + tab)
}
</script> </script>
<template> <template>
<div> <div>
<VTabs v-model="activeTab"> <VTabs v-model="activeTab">
<VTab v-for="item in tabs" :value="item.tab" :to="'/subscribe-tv/' + item.tab"> <VTab v-for="item in tabs" :value="item.tab" @click="jumpTab(item.tab)">
<span class="mx-5">{{ item.title }}</span> <span class="mx-5">{{ item.title }}</span>
</VTab> </VTab>
</VTabs> </VTabs>
+11 -11
View File
@@ -20,14 +20,14 @@ const router = createRouter({
component: () => import('../layouts/default.vue'), component: () => import('../layouts/default.vue'),
children: [ children: [
{ {
path: 'dashboard', path: '/dashboard',
component: () => import('../pages/dashboard.vue'), component: () => import('../pages/dashboard.vue'),
meta: { meta: {
requiresAuth: true, requiresAuth: true,
}, },
}, },
{ {
path: 'ranking', path: '/ranking',
component: () => import('../pages/ranking.vue'), component: () => import('../pages/ranking.vue'),
meta: { meta: {
keepAlive: true, keepAlive: true,
@@ -35,63 +35,63 @@ const router = createRouter({
}, },
}, },
{ {
path: 'resource', path: '/resource',
component: () => import('../pages/resource.vue'), component: () => import('../pages/resource.vue'),
meta: { meta: {
requiresAuth: true, requiresAuth: true,
}, },
}, },
{ {
path: 'subscribe-movie/:tab', path: '/subscribe-movie',
component: () => import('../pages/subscribe-movie.vue'), component: () => import('../pages/subscribe-movie.vue'),
meta: { meta: {
requiresAuth: true, requiresAuth: true,
}, },
}, },
{ {
path: 'subscribe-tv/:tab', path: '/subscribe-tv',
component: () => import('../pages/subscribe-tv.vue'), component: () => import('../pages/subscribe-tv.vue'),
meta: { meta: {
requiresAuth: true, requiresAuth: true,
}, },
}, },
{ {
path: 'calendar', path: '/calendar',
component: () => import('../pages/calendar.vue'), component: () => import('../pages/calendar.vue'),
meta: { meta: {
requiresAuth: true, requiresAuth: true,
}, },
}, },
{ {
path: 'downloading', path: '/downloading',
component: () => import('../pages/downloading.vue'), component: () => import('../pages/downloading.vue'),
meta: { meta: {
requiresAuth: true, requiresAuth: true,
}, },
}, },
{ {
path: 'history', path: '/history',
component: () => import('../pages/history.vue'), component: () => import('../pages/history.vue'),
meta: { meta: {
requiresAuth: true, requiresAuth: true,
}, },
}, },
{ {
path: 'site', path: '/site',
component: () => import('../pages/site.vue'), component: () => import('../pages/site.vue'),
meta: { meta: {
requiresAuth: true, requiresAuth: true,
}, },
}, },
{ {
path: 'plugins/:tab', path: '/plugins',
component: () => import('../pages/plugin.vue'), component: () => import('../pages/plugin.vue'),
meta: { meta: {
requiresAuth: true, requiresAuth: true,
}, },
}, },
{ {
path: 'setting/:tab', path: '/setting',
component: () => import('../pages/setting.vue'), component: () => import('../pages/setting.vue'),
meta: { meta: {
requiresAuth: true, requiresAuth: true,
+8 -2
View File
@@ -9,6 +9,7 @@ import noImage from '@images/logos/plugin.png'
import { useDisplay } from 'vuetify' import { useDisplay } from 'vuetify'
import { isNullOrEmptyObject } from '@/@core/utils' import { isNullOrEmptyObject } from '@/@core/utils'
import { useDefer } from '@/@core/utils/dom' import { useDefer } from '@/@core/utils/dom'
import router from '@/router'
const route = useRoute() const route = useRoute()
@@ -19,7 +20,7 @@ const display = useDisplay()
let deferApp = (_: number) => true let deferApp = (_: number) => true
// 当前标签 // 当前标签
const activeTab = ref(route.params.tab) const activeTab = ref(route.query.tab)
// 标签页 // 标签页
const tabs = [ const tabs = [
@@ -320,6 +321,11 @@ function handleRepoUrl(url: string | undefined) {
return url.replace('https://github.com/', '').replace('https://raw.githubusercontent.com/', '') return url.replace('https://github.com/', '').replace('https://raw.githubusercontent.com/', '')
} }
// 跳转tab
function jumpTab(tab: string) {
router.push("/plugins?tab=" + tab)
}
// 加载时获取数据 // 加载时获取数据
onBeforeMount(async () => { onBeforeMount(async () => {
await refreshData() await refreshData()
@@ -330,7 +336,7 @@ onBeforeMount(async () => {
<template> <template>
<div> <div>
<VTabs v-model="activeTab"> <VTabs v-model="activeTab">
<VTab v-for="item in tabs" :value="item.tab" :to="'/plugins/' + item.tab"> <VTab v-for="item in tabs" :value="item.tab" @click="jumpTab(item.tab)">
<span class="mx-5">{{ item.title }}</span> <span class="mx-5">{{ item.title }}</span>
</VTab> </VTab>
</VTabs> </VTabs>