项目开发中一些小坑之路

一. 自定义横向二级菜单，切换不同的一级菜单时，默认选中二级菜单渲染不正确。

     描述：

      （1）其实就是一级和二级菜单没有默认的激活项，导致每次刷新页面时，只有一级菜单显示，二级菜单并没有存在，但主界面仍旧停留在上一次选择的一二级菜单项下对应页面。

      （2）又如从菜单1-2切换到菜单2-1，再次切换回菜单1（并不点击下面的二级菜单），看到上一次选择的1-2菜单仍处于激活状态。

解决方法：

      第一步：首先指定一个默认激活的一级菜单（包括默认激活的二级菜单），当用户第一次登录成功，有默认的展示界面。

      第二步：接着便是设置二级菜单的激活项了。由上面描述的第二条可以知道，同一时刻只能有一个二级菜单项被激活。

      问题：我的二级菜单是用的v-for动态生成，用了v-router模式，选中的目标二级菜单通过，该菜单在路由表中的path进行跳转。一直在纠结怎么能取到被选中的二级菜单，把该菜单的index（对应路由的路径）设置为default-active。

router

是否使用 vue-router 的模式，启用该模式会在激活导航时以 index 作为 path 进行路由跳

default-active

当前激活菜单的 index

分析知道：要知道二级菜单改变了，如此需要监听二级菜单的变化，另外，default-active是唯一的，且有一个默认值。

处理方法：

（1）即将default-active绑定为一个curMenu2，并给定与界面默认展示的界面对应的二级菜单index为默认值。

（2）接着只要监听二级菜单改变，则将curMenu2的值设为当前选择二级菜单的index，ok问题解决了。

（3）监听二级菜单被选中，则是监听路由改变，毕竟使用的是v-router模式。

另外，有一个规避的方法，就是为每一个一级菜单默认设置一个二级菜单，这个设置实现在router.js中：每一个大的一级菜单下，设置默认的匹配项~

二.定时函数一直被执行

      描述：由于需要，界面上某处状态需要实时显示真实状态，因此需要定时向后端查询数据，并更新显示。不过，由于一个组件由不同的几个tab页组成的，且这个组件在同一级的el-tree节点上切换时，只更新显示数据，并没有重新加载组件，监听到树节点改变时，则调用数据请求接口。

      而对于定时调用的接口，在destoryed()函数中，进行了clearInterval()处理，但切换tab页时并不会触发次函数，只有切换到另外节点时才会触发。于是乎，在当前节点上，请求会一直发送，遭到后端投诉把他们搞挂了。

     解决方法：处理更细一步，只有激活该tab页时，才调用该定时请求函数，不是则停止。

     注意：由此又联想到，不应该仅仅是定时调用接口要这样处理，其他的请求也应该一样。如果用户一直处于该界面，当实际数据已经发生改变，但非定时自发性请求并不会自己发送请求查询新结果，通过切换tab页也不会触发请求，这样用户数据并不是最新数据。因此请求必须控制到tab级。

三. el-form中使用了validate-on-rule-change=false，使得在触发验证显示时，切换国际化语言，改验证信息未改变为对应语言显示，因此必须设置为true。另外关于校验部分，后面再单独写博文记录。