使用iview的Menu组件，路由中断跳转但是路由高亮仍然改变问题

问题描述：

最近项目有一个需求，在表单填写相关页面，如果用户没有保存表单内容，点击导航栏将要离开页面的时候提示“信息未保存，离开页面数据将会丢失，是否确定离开？”

（1）选择“确定” —— 执行路由跳转

（2）选择“取消” —— 中止跳转，仍旧留在当前页

以上为需求描述，遇到的问题是：选择取消后，侧导航栏的高亮项不正确。

简单示例如下图：点击“错误收集”，取消路由跳转，页面仍停留在“指令”页面，但是路由高亮已经变成了“错误收集”。

 解决思路：

1. 在当前页面中添加路由守卫，满足条件继续跳转，否则中止跳转；

2. 给导航栏menuItem添加自定义高亮样式（如 class="xmj-menu-active"），不要用iview的menu组件的默认高亮类（目前没有找到使用默认高亮类名 ".ivu-menu-item-active.ivu-menu-item-selected" 时候的解决方法）；

3. 在路由更新时相应改变active-class（beforeRouteEnter，beforeRouteUpdate）；

代码示例：

（1）当前表单页面：

（2）主页面main.vue