1、项目需求:在项目开发中,多级菜单的情况下,勾选子菜单时,需要在父级菜单添加active样式。
2、遇到的问题:一级路由菜单的话,点击当前路由会自动在路由标签上添加router-link-exact-active和router-link-active样式。因此针对一级路由只需要改写活跃状态下的css样式即可。但是在下拉菜单中,无法通过点击子菜单的路由给父级菜单自动添加活跃状态下的css属于,因为就需要另外想办法去处理。
3、解决方案分析:(记录当时的心路历程)
(a)、考虑click事件添加css。给路由点击时,添加时间,获取当前点击的菜单,匹配到其父级菜单,给父级菜单添加css属性。
(b)、通过监听路由变化事件进行判断。
当时第一种方案是一开始就想到的,但是经过分析旧的这种方法不可取,click事件需要把子菜单和父菜单做了对应的绑定,以后父级菜单命名修改也不方便,于是就想到监听路由变化来判断当前的页面。一开始是打算在路由守卫处做监听,判断to的path是否是需要渲染父级菜单的子菜单,通过vuex定义全局变量,在顶部的组件页面做监听全量变量的变化做判断。由于这种做法需要路由守卫的配合,耦合性比较高,不利于以后修改。经常搜索,才发现可以在组件页面内部直接监听路由的变化。
4、解决方案:
(a)、在菜单组件内部watch监听路由变化。
(b)、在路由表文件router.js中给需要渲染父级菜单的子菜单中添加meta属性,并在meta中添加routerParent属性,用于标识需要监听的父级对象。
(c)、在菜单组件内部,定义一个clickMenuNum数据,具体值为数字,用数字用于表示当前需要渲染的父级菜单。
(d)、在父级路由中,添加:class,用于判断是否需要添加路由活跃样式。
(e)、在created初始化方法中,获取当前路由,判断。主要是用于F5刷新重新渲染。
(a)在菜单组件内部watch监听路由变化:
1 watch: { 2 '$route'(toRouter, fromRouter) { 3 this.doMemuActive(toRouter); 4 } 5 },
1 doMemuActive(toRouter) { 2 if (toRouter && toRouter.meta && toRouter.meta.routerParent) { 3 if (toRouter.meta.routerParent == 'community') { 4 this.clickMenuNum = 5; 5 } else if (toRouter.meta.routerParent == 'intel') { 6 this.clickMenuNum = 6; 7 } else if (toRouter.meta.routerParent == 'disp') { 8 this.clickMenuNum = 7; 9 } else { 10 this.clickMenuNum = -1; 11 } 12 } else {