解决导航栏按钮背景色切换,刷新页面,按钮背景色切换,页面和路径没有切换问题
上篇博文中 点击导航栏切换背景色 有一个bug,如果点击第二个或者后面几个按钮,再刷新页面,按钮背景色会跳到第一个按钮上去,但是!!!,页面和页面路径还停留在当前页面,怎么解决呢
看实例
这是首页,路径和按钮背景色是对应的
这是第二个页面,路径和按钮背景色是对应的
重点来了!!!,当我刷新页面,一看
按钮背景色恢复到了第一个按钮上,但是,页面路径并没有改变,还是第二个页面的路径,
解决方法如下
在导航栏组件中:
<script>
export default {
name: "App",
data() {
return {
// 导航
navArr: [
{ path: "/zbpb", content: "值班排班" },
{ path: "/xxjb", content: "信息接报" },
{ path: "/tfsj", content: "突发事件" },
{ path: "/txzc", content: "通信支持" },
],
dynamic:'', //默认第一个
};
},
methods: {
// 点击切换导航栏背景色
btnclick(index) {
// 存储当前点击的背景色下标,再赋值
localStorage.setItem('index',index);
let labelExp=localStorage.getItem('index');
let labelExpArr = eval('('+labelExp+')');//字符串数组转数组
this.dynamic = labelExpArr;
},
},
mounted(){
// 刷新页面直接拿存储的下标,就不会导致一刷新又跳到第一个去了
let labelExp=localStorage.getItem('index');
let labelExpArr = eval('('+labelExp+')');//字符串数组转数组
this.dynamic = labelExpArr;
}
利用本地存储当前页面的下标,刷新的时候在mounted就会去找本地找当前下标,就不会出现上面这种情况了。
到这里就基本解决了,欢迎随时留言评论,
如果此篇博文对您有帮助,还请点点关注点点赞呐~,谢谢 ~ ~