vue3 ref 的一个问题？

Z时代
2024-02-19
分类：IT

vue3 ref 的一个问题？

环境：vue3 + vue-router4
目标功能：tab切换，实现字体颜色和 svg图标切换。
代码逻辑描述：

1, 通过提前设置好.router-link-active的字体颜色，实现字体颜色切换。

2，定义响应式tabName，他的值是 router.currentRoute.value.name 当前激活的路有名称，根据tabName值的变化来实现 svg图标的切换。

问题描述：每次刷新页面之后，都会出现，必须点击N次之后（N = tab.item.length）,router.currentRoute.value.name的值，才能正常返回当前active路由的name。在点击次数小于N的情况下，router.currentRoute.value.name的值总是上一个active路由的name。
代码如下：

<template>
    <footer class="main-footer" @click="changeTabIndex" @load="changeTabIndex">
        <router-link to="home">
            <n-icon class="tab-icon" v-show=" tabName !== 'Home' ">
                <HomeOutline />
            </n-icon>
            <n-icon class="tab-icon" v-show=" tabName === 'Home' ">
                <Home />
            </n-icon>
            <strong>
                主页
            </strong>
        </router-link>
        <router-link to="new">
            <n-icon class="tab-icon" v-show=" tabName !== 'New' " >
                <BagHandleOutline />
            </n-icon>
            <n-icon class="tab-icon"  v-show=" tabName== 'New' " >
                <BagHandle />
            </n-icon>
            <strong>
                新品
            </strong>
        </router-link>
        <router-link to="hot">
            <n-icon class="tab-icon" v-show="tabName == 'Hot'">
                <Bonfire />
            </n-icon>
            <n-icon class="tab-icon" v-show="tabName != 'Hot'">
                <BonfireOutline />
            </n-icon>
            <strong>
                热卖
            </strong>
        </router-link>
        <router-link to="cart">
            <n-icon class="tab-icon" v-show="tabName == 'Cart'">
                <Cart />
            </n-icon>
            <n-icon class="tab-icon" v-show="tabName != 'Cart'">
                <CartOutline />
            </n-icon>
            <strong>
                购物车
            </strong>
        </router-link>
        <router-link to="my">
            <n-icon class="tab-icon" v-show="tabName == 'My'">
                <Person />
            </n-icon>
            <n-icon class="tab-icon" v-show="tabName != 'My'">
                <PersonOutline />
            </n-icon>
            <strong>
                我的
            </strong>
        </router-link>
    </footer>
</template>
<script setup lang="ts">
import {ref,onMounted} from 'vue'
import {NIcon} from 'naive-ui'
import { 
    Home, HomeOutline, 
    BagHandle, BagHandleOutline,
    Bonfire, BonfireOutline,
    Cart, CartOutline, 
    Person, PersonOutline
    } from '@vicons/ionicons5'
import {useRouter} from 'vue-router'
const tabName = ref('');
const router = useRouter();
let count = 0;
onMounted(()=>{
    tabName.value = String(router.currentRoute.value.name);
});
function changeTabIndex(){
    console.log(`第${count++}次单击`);
    console.log('---', String(router.currentRoute.value.name));
    tabName.value = String(router.currentRoute.value.name);
    console.log(tabName.value);
};
</script>
<style lang='scss' scoped>
.main-footer-size{
    height: $mainFooterHeight;
    box-sizing: border-box;
}
.main-footer{
    @extend .main-footer-size;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: flex-end;
    width: 100vw;
    padding-bottom: 5px;
    background-color: $mainBgColor;
        a{  
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            height: $mainFooterHeight;
            color: $mainFontColor;
            strong{
                font-size: 13px;
                line-height: 15px;
                height: 15px;
            }
        }
        .tab-icon{
            flex: 1;
            font-size: 22px;
            margin-top: 5px;
        }
        .router-link-active{
            color: $mainColor;
        }
}</style>