vue3 顶部菜单，点击router-link实现选中样式失败，会重置selectIndex=0？

Question

按照vue2的思路：

<template>
    <header>
        <nav>
            <span>A</span>
            <ul>
                <li v-for="(item,index) in headerList" :key="index">
                    <router-link :to="{name:item.url}" @click="handleClick(item.index)" :class="selectIndex == index ? 'nav_active' : ''">{{ item.name }}</router-link>
                </li>
            </ul>
            <ol>
                <li v-for="(item,index) in loginList" :key="index">
                    <router-link :to="{name:item.url}" @click="handleClick(item.index)" :class="selectIndex == index ? 'nav_active' : ''">{{ item.name }}</router-link>
                </li>
            </ol>
        </nav>
    </header>
</template>

<script setup lang="ts">
import {onMounted, ref} from 'vue'

// 导航列表
const headerList = [
    {
        index: 0,
        url: "index",
        name: "首页"
    },
    {
        index: 1,
        url: "about",
        name: "关于我们"
    },
    {
        index: 2,
        url: "contact",
        name: "联系我们"
    },
    {
        index: 3,
        url: "price",
        name: "服务价格"
    },
    {
        index: 4,
        url: "update",
        name: "更新公告"
    },
]
const loginList = [
    
    {
        index: 5,
        url: "login",
        name: "登录"
    },
    {
        index: 6,
        url: "register",
        name: "免费注册"
    },
]
const selectIndex = ref<number>(0)

// 点击菜单
const handleClick = (index: number) => {
    console.log(index)
    selectIndex.value = index
    console.log("selectIndex.value:", selectIndex.value)
}

onMounted(() => {
    console.log("onMounted selectIndex.value:", selectIndex.value)
})
</script>

<style scoped>

</style>

结果每次点击router-link菜单之后，重新执行了onMounted方法，并且selectIndex.value置0

Answer 1

keep-alive 包裹一下?

你可以给 meta 里面做个标记，每次 onMounted 的时候读一下 meta 重新设置。不然即使解决了，也解决不了刷新会导致导航显示异常的问题