4.1 Vue电商后台管理系统主页布局的改进：解决主页中侧边栏切换的自己的方法

1. 问题描述：

1. 点击不同的二级标题，要进行标题的高亮切换。
2. 基于 menu 的default-active属性 去解决。

2. 老师的解决方案总结如下：

1. 在data（）节点下定义一个activePath变量，来控制高亮的切换。
2. 在methods节点下，定义一个函数saveNavState (activePath)，通过会话存储sessionStorage来保存传递过来的值activePath，也就是二级标题传递过来的index（即：路径）。
3. 触发点击事件时，改变this.activePath。
4. 在created（）函数中也改变this.activePath，将sessionStorage中存储的值赋过去。当点击浏览器的刷新按钮时，触发created钩子。

具体如下：

methods节点下：

 // 保存链接的激活状态
    saveNavState (activePath) {
      window.sessionStorage.setItem('activePath', activePath)
      this.activePath = activePath
    }

created（）：

 created () {
    this.getMenuList()
    console.log(this)
    this.activePath = window.sessionStorage.getItem('activePath')
  }

但我发现仍然有不足，就是：当我手动更改地址栏的部分地址时，左边侧边栏无法随之改动。

3. 自己设想的解决方法—利用this.$route.path

回忆起 this.$route.path可以表示当前地址栏中的路径。可以动态绑定default-active的值为this.$route.path。也可以做到点击不同的二级标题时高亮的切换，并且刷新页面时也是有效的。这种方法也更简洁。

但是，当我手动更改地址栏的部分地址时，仍然不行。如：把 /users 改成 /rights，发现虽然右边的组件改变了，但是左侧的侧边栏不变。

至此，我的方法也不够完善。

手动更改无法生效的原因如下：

地址栏hash部分的地址变动,不会导致浏览器像服务器重新发起请求，从而不会重新加载整个单页面应用的脚本。

因此，vue-router 同一个页面地址栏参数改变（比如文章的发布和编辑是同一个页面），不会触发vue的created或者mounted钩子，所以数据不会重新渲染。（我也懂了，这也是为什么我在created（）中打印this时，只有点击浏览器的刷新按钮，才会打印成功。）

4. 最后的解决方案

查阅资料，加入了watch侦听器来侦听地址栏的变化，以此改变activePath的值。最后完成了改变地址栏的同时，左侧侧边栏效果随之改变。

// 监听地址栏的变化
  watch: {
    $route (to, from) {
      console.log(to)
      this.activePath = to.path
    }