解决导航栏按钮背景色切换，刷新页面，按钮背景色切换，页面和路径没有切换问题

上篇博文中点击导航栏切换背景色有一个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就会去找本地找当前下标，就不会出现上面这种情况了。
到这里就基本解决了，欢迎随时留言评论，
如果此篇博文对您有帮助，还请点点关注点点赞呐~，谢谢 ~ ~

解决导航栏按钮背景色切换，刷新页面，按钮背景色切换，页面和路径没有切换问题相关推荐

一次性解决导航栏的所有问题
系统默认导航栏的返回按钮和返回方式在默认情况下,导航栏返回按钮长这个样子导航栏默认返回按钮导航栏左上角的返回按钮,其文本默认为上一个ViewController的标题,如果上一个ViewCont ...
iOS 解决导航栏pop返回时出现黑块问题！
iOS 解决导航栏pop返回时出现黑块问题! 问题描述: 导航栏正常从A页面push到B页面,从B页面pop返回A页面时遇到过渡过程中导航栏出现黑块的问题. 如截图所示: 问题原因: A界面导航栏被影 ...
微信小程序自定义导航栏，只保留右上角胶囊按钮
微信小程序开发交流qq群 173683895 承接微信小程序开发.扫码加微信. navigationStyle 导航栏样式,仅支持以下值: default 默认样式 custom 自定义导航 ...
解决iscroll.js上拉下拉刷新手指划出屏幕页面无法回弹问题
解决iscroll.js上拉下拉刷新手指划出屏幕页面无法回弹问题参考文章: (1)解决iscroll.js上拉下拉刷新手指划出屏幕页面无法回弹问题 (2)https://www.cnblogs.co ...
vue底部导航栏（选中状态刷新不消失）解决
我们用Vue写手机端的项目,经常会写底部导航栏,我这里总结一套比较方便实用的底部导航栏方法,并且可以解决浏览器刷新选中状态消失的问题.也可以选择自适应屏幕.看一下效果,底部的图标是我自己找的,选中和未 ...
小牛的安卓笔记-----底部导航栏的实现以及用TabLayout+ViewPager+Fragment实现页面滑动切换
昨夜西风凋碧树,独上高楼,望尽天涯路. 今天难得有时间,准备写一写我们在APP中经常用到的页面形式,废话不多说,直接一张图看看页面效果你就知道为啥是常用的页面形式.先看看逻辑和最后的效果是怎么样的: ...
iOS11解决导航栏影藏返回文字的方法
iOS11适配 : iOS适配工作需求如果要只保留返回按钮的文字,不需要"返回"文字 iOS11之前在全局函数执行的地方使用一下代码: let barButton = UIB ...
uniapp 动态控制顶部导航栏显隐，控制右上角按钮隐藏 app
//设置页面全屏 onShow() {this.initAluminumLiquidCodeList();this.handleInit();// #ifdef APP-PLUSplus.naviga ...
html怎么让导航栏平均分布,CSS 怎么让按钮平均分布
CSS 怎么让按钮平均分布等分布局是指子元素平均分配父元素宽度的布局方式, 本文将介绍实现等分布局的 4 种方式一, float 缺点: 结构和样式存在耦合性, IE7 - 浏览器下对宽度百分比取 ...

解决导航栏按钮背景色切换，刷新页面，按钮背景色切换，页面和路径没有切换问题

解决导航栏按钮背景色切换，刷新页面，按钮背景色切换，页面和路径没有切换问题

上篇博文中点击导航栏切换背景色有一个bug，如果点击第二个或者后面几个按钮，再刷新页面，按钮背景色会跳到第一个按钮上去，但是！！！，页面和页面路径还停留在当前页面，怎么解决呢

看实例

重点来了！！！，当我刷新页面，一看

解决方法如下

解决导航栏按钮背景色切换，刷新页面，按钮背景色切换，页面和路径没有切换问题相关推荐

最新文章

热门文章

解决导航栏按钮背景色切换，刷新页面，按钮背景色切换，页面和路径没有切换问题

解决导航栏按钮背景色切换，刷新页面，按钮背景色切换，页面和路径没有切换问题

上篇博文中 点击导航栏切换背景色 有一个bug，如果点击第二个或者后面几个按钮，再刷新页面，按钮背景色会跳到第一个按钮上去，但是！！！，页面和页面路径还停留在当前页面，怎么解决呢

看实例

重点来了！！！，当我刷新页面，一看

解决方法如下

解决导航栏按钮背景色切换，刷新页面，按钮背景色切换，页面和路径没有切换问题相关推荐

最新文章

热门文章

上篇博文中点击导航栏切换背景色有一个bug，如果点击第二个或者后面几个按钮，再刷新页面，按钮背景色会跳到第一个按钮上去，但是！！！，页面和页面路径还停留在当前页面，怎么解决呢