解决刷新或者重新点击导航栏,对应的侧边栏选中状态丢失或TAB页面与选中状态不符合

 一:解决刷新时,侧边栏选中状态丢失或者选中状态与TAB页面不符合。
select 菜单激活回调 index: 选中菜单项的 index, indexPath: 选中菜单项的 index path
default-active 当前激活菜单的 index string
  1. 1.给菜单绑定一个属性为activeMenu
  2. 2.在data中定义一个activeMenu的初始值为第一个选项或者为空
  3. 3.在菜单激活的回调事件中,把index赋值给activeMenu
xx xx
 export default {
    data() {
      return {
      
        activeMenu: 'pxInformation', // 初始值
        activeMenu: localStorage.getItem('activeMenu') || 'pxInformation',
       
      };
    },
 methods: {
      MenuSelect(index, path) {
        console.log(index);
        this.activeMenu=index;
        localStorage.setItem('activeMenu', index);
      }
    }

刷新前的时候会选中侧边栏B,刷新后选中的是侧边栏A,为什么?

这是因为每次刷新页面时,Vue 组件都会被重新创建,data 中的数据会被重新初始化,所以 activeMenu 的值会被重置,并非上一次在menuSelect对其进行赋值的index。

要解决这个问题,你可以将 activeMenu 的值存储在浏览器的 localStorage 中。这样,即使页面刷新,activeMenu 的值也能保持不变。

这个方法虽然有一定的效果,但是确不是最好的,可以解决刷新页面的时候选项及选中效果不掉。二、解决从导航菜单点进来的时候,如果选中的是侧边栏B ,但是显示的是侧边栏A,对应的TAB页面又是侧边栏B的页面。针对这个问题应该如何解决呢?


首先我们要使用watch侦听:

重复以上的步骤,

一:定义

 

二:在data中定义变量activeMenu为空 

三:在方法中进行赋值

    MenuSelect(index, path) {
        this.activeMenu=index;
      }

四:侦听路由信息变化,因为导航菜单是通过路由进行跳转的,侦听路由,拿到$route对象中的name,赋值给当前激活菜单的 index,就可以很好的解决这个问题。

 watch:{
      '$route':{
        handler(newVal) {
          this.activeMenu=newVal.name
        },
        immediate: true,
      }

    }

你可能感兴趣的:(vue.js,javascript,前端)