关于前端:vue使用routerlink做导航栏跳转遇到的Bug

遇到的问题:点击导航按钮时，点击第一次没有选中状态，须要点击第二次能力选中状态。

测试过程：

控制台打印

获取缓存，在控制台打印导航栏 index，初始化为 undefined。
点击第一次控制台打印，然而获取 index 缓存之后，代码主动反复执行了一次打印，index 的值复原回 undefined，状态未选中


点击第二次控制台打印，获取 index 缓存，代码不执行反复打印，状态选中

解决问题：

只需增加 router-link-active 款式

.router-link-active {background: #848484;}

代码：
在 ronter-link 中增加 exact 属性解决首页始终默认激活

<template v-if="!isLogin">
    <template id="onCh">
        <div id="head-nav" v-for="(item, index) in rightMenu" :key="index">
            <keep-alive exclude="Dashboard">
                <router-link class="oneli icobtn" :to="{path:item.path}" exact v-if="item.ico" >
                      <img :src="item.ico" alt="" />
                      <span>{{item.title}}</span>
                </router-link>
                <router-link class="oneli rigisterbtn" :to="{path:item.path}" exact v-else>
                      <span>{{item.title}}</span>
                </router-link>
            </keep-alive>
        </div>
    </template>
</template>

#head-nav a 是在多个 router-link 时起定位的作用

#head-nav a.router-link-active {background: #0172ea;}

参考原文地址：
https://www.jianshu.com/p/eca…
https://blog.csdn.net/mylover…
https://www.cnblogs.com/lisiy…
https://blog.csdn.net/version…
https://blog.csdn.net/x_xiNan…
https://www.jianshu.com/p/d9a…
https://segmentfault.com/q/10…
https://blog.csdn.net/qq_4223…