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

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

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