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

上篇博文中点击导航栏按钮切换按钮背景色有一个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就会去找本地找当前下标，就不会出现上面这种情况了。

没了，结束了，是不是很简单呐，如有问题，欢迎留言。
如果此篇博文对您有帮助，还请动动小手点赞收藏 ⭐留言呐~，谢谢 ~ ~

解决按钮背景色切换，刷新页面，按钮背景色,页面,路径不匹配问题

解决方法如下