vue 如何通过监听路由变化给父级路由菜单添加active样式

 

 

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 {
<