修正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

View File

@@ -1,5 +1,6 @@
<script lang="ts" setup>
import { useRoute } from 'vue-router'
import router from '@/router'
import AccountSettingAccount from '@/views/setting/AccountSettingAccount.vue'
import AccountSettingNotification from '@/views/setting/AccountSettingNotification.vue'
import AccountSettingSite from '@/views/setting/AccountSettingSite.vue'
@@ -13,7 +14,7 @@ import AccountSettingDirectory from '@/views/setting/AccountSettingDirectory.vue
const route = useRoute()
const activeTab = ref(route.params.tab)
const activeTab = ref(route.query.tab)
// tabs
const tabs = [
@@ -68,12 +69,17 @@ const tabs = [
tab: 'about',
},
]
// 跳转tab
function jumpTab(tab: string) {
router.push("/setting?tab=" + tab)
}
</script>
<template>
<div>
<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" />
{{ item.title }}
</VTab>

View File

@@ -1,6 +1,7 @@
<script setup lang="ts">
import SubscribeListView from '@/views/subscribe/SubscribeListView.vue'
import SubscribePopularView from '@/views/subscribe/SubscribePopularView.vue'
import router from '@/router'
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>
<template>
<div>
<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>
</VTab>
</VTabs>

View File

@@ -1,6 +1,7 @@
<script setup lang="ts">
import SubscribeListView from '@/views/subscribe/SubscribeListView.vue'
import SubscribePopularView from '@/views/subscribe/SubscribePopularView.vue'
import router from '@/router'
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>
<template>
<div>
<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>
</VTab>
</VTabs>