Vue+element ui之侧边栏导航效果优化

昨天在我个人写的一个vue项目中，侧边栏导航遇到了一个优化方面的小难题。

问题描述：
用户进入后台管理首页，通过点击导航栏加载路由组件，在子组件内有面包屑导航。通过面包屑导航，点击回到首页时，侧边栏默认选中的项目没有恢复默认值。

问题分析：
在项目中，Home.vue文件里设置了

 data() {
    return {
      // 被激活的链接地址
      activePath: '',
      // 展开的选项栏
      openeds:['']
    }
  },
  methods: {
  	// 保存链接激活状态
    saceNacstate(activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
    }
  }

但是在Home.vue 中加载出来的页面没有对 activePath 属性的修改。
在这里我选择了采用修改sessionStorage里的activePath值。

在修改activePath值的时候，出现了一个问题。成功修改activePath值后，但是在Hmoe.vue内并不能实时获取到activePath的值。

经过查询一些资料，整理出来了一个办法。
在main.js内实时监控sessionStorage内的值。

具体代码如下：

//main.js 实时监听session的值 start
Vue.prototype.resetSetItem = function (key, newVal) {
    if (key == 'activePath') {
      // 创建一个StorageEvent事件
      var newStorageEvent = document.createEvent('StorageEvent')
      const storage = {
        setItem: function(k, val) {
          sessionStorage.setItem(k, val)
          // 初始化创建的事件
          newStorageEvent.initStorageEvent(
            'setItem',
            false,
            false,
            k,
            null,
            val,
            null,
            null
          )
          // 派发对象
          window.dispatchEvent(newStorageEvent)
        }
      }
      return storage.setItem(key, newVal)
    }
 }
//main.js 实时监听session的值 end

**

在main.js内设置了实时监控后，获取sessionStorage值的方法也做出了相应的改变。

**
Home.vue内代码如下：

created() {
    // this.activePath = window.sessionStorage.getItem('activePath')
    window.addEventListener('setItem', () => {
      var val = sessionStorage.getItem('activePath')
      this.activePath=val
      // 把侧边栏菜单的展开栏对应的数组清空，实现菜单栏折叠
      this.openeds=['']
      console.log('sdsd',val)
    })
  },