Vue中如何根据hash变化动态调整响应式菜单的高亮显示？

本文共计805个文字，预计阅读时间需要4分钟。

场景+Vue+Element实现管理页面菜单栏，点击菜单时+router+修改hash访问不同子组件。但修改hash时，菜单栏展开状态和highlight状态不会同步，需要手动实现。尝试尝试看，第一反应是通过'hash'实现。

情景

Vue+Element 实现管理页面菜单栏，

点击菜单时 router 改变 hash 访问不同子组件。

但是改变 hash 时菜单栏展开状态和 highlight 并不会同步，

需要手动实现。

Try Try See

第一反应是通过 onhashchange 监听 hash 的变化，

讲location.hash.slice(2) 推给 menu 的default-active 即可。

此时通过手动输入 url 或者前进后退时均可正常加载对应状态，但是通过组件中的 link 访问时，menu 的状态没有改变。

加入 alert 验证发现没有触发 hashchange。