遇到的问题:点击导航按钮时,点击第一次没有选中状态,须要点击第二次能力选中状态。
测试过程:
控制台打印
获取缓存,在控制台打印导航栏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...