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

左手的ㄟ右手 2023-06-01 12:40 36阅读 0赞

![1103120-20190814110647541-2079477218.png][]

![1103120-20190814111118180-1228381154.png][]

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 {
    13           this.clickMenuNum = -1;
    14         }
    15       },

(b）、路由表定义 （routerParent字段表示父级代码的字符串标志，这样子不需要通过一个个路径去判断，只需要判断meta里面的一个属性即可找到其父级菜单）

1 export const constantRouterMap = [
     2  {path: '/home', component: _import('arcgisMap/home'), hidden: true,redirect: '/home/arcgisMap',
     3     children: [
     4  　　 {path: 'multipleQuery', component: _import('arcgisMap/multipleQuery'), hidden: true },
     5 
     6       {path: 'communitySecurity', component: _import('arcgisMap/communitySecurity'), meta: { routerParent: 'community' }, hidden: true},
     7 
     8       {path: 'IntelDigCtrl', component: _import('arcgisMap/IntelDigCtrl'), meta: { routerParent: 'intel' }, hidden: true },
     9       {path: 'peerAnalysis', component: _import('arcgisMap/peerAnalysis'), meta: { routerParent: 'intel' }, hidden: true },
    10       {path: 'dayInNightOut', component: _import('arcgisMap/dayInNightOut'), meta: { routerParent: 'intel' }, hidden: true },
    11       {path: 'nightBehavior', component: _import('arcgisMap/nightBehavior'), meta: { routerParent: 'intel' }, hidden: true },
    12       {path: 'frequentBehavior', component: _import('arcgisMap/frequentBehavior'), meta: { routerParent: 'intel' }, hidden: true },
    13       {path: 'personWifiMergeAls', component: _import('arcgisMap/personWifiMergeAls'), meta: { routerParent: 'intel' }, hidden: true },
    14 
    15       {path: 'dispGroup', component: _import('arcgisMap/dispositionModel/dispGroup/dispGroup'), meta: { routerParent: 'disp' }, hidden: true},  /*布控库管理*/
    16       {path: 'dispTargetGroup', component: _import('arcgisMap/dispositionModel/dispTargetGroup/dispTargetGroup'), meta: { routerParent: 'disp' }, hidden: true},  /*布控库目标分组*/
    17       {path: 'dispTarget', component: _import('arcgisMap/dispositionModel/dispTarget/dispTarget'), meta: { routerParent: 'disp' }, hidden: true},  /*布控目标管理*/
    18     ]
    19   }]

（c）、在菜单组件内部，定义一个clickMenuNum数据

1  data(){
    2       return{
    3         clickMenuNum:-1,
    4       }
    5     },

（d）、在父级路由中，添加**:class**，用于判断是否需要添加路由活跃样式

1 <el-col :span="15" class="headerCenter flexClsNormal">
     2       <div style="width: 100%;width: 100%;overflow-y: auto;text-align: center;height: 60px;">
     3         <div><router-link to="/home/arcgisMap">首页</router-link></div>
     4         <div><router-link to="/home/actualCensus">实有人口清查</router-link></div>     
     5         <div style="margin: auto 0px;" >
     6           <el-dropdown class="headerBarCls"  @command="dropdownClick" :class="{ 'clickMenuNumTrue':clickMenuNum==5}">
     7             <span class="el-dropdown-link">社区管控<i class="el-icon-arrow-down el-icon--right"></i></span>
     8             <el-dropdown-menu slot="dropdown">
     9               <el-dropdown-item command="1">
    10                 <router-link to="/home/communitySecurity" >社区治安一览表</router-link>
    11               </el-dropdown-item>
    12             </el-dropdown-menu>
    13           </el-dropdown>
    14         </div>
    15         <div style="margin: auto 0px;" >
    16           <el-dropdown class="headerBarCls"  @command="dropdownClick" :class="{ 'clickMenuNumTrue':clickMenuNum==6}">
    17             <span class="el-dropdown-link">智能挖掘<i class="el-icon-arrow-down el-icon--right"></i></span>
    18             <el-dropdown-menu slot="dropdown">
    19               <el-dropdown-item command="4">
    20                 <router-link to="/home/IntelDigCtrl" >人员档案</router-link>
    21               </el-dropdown-item>               
    22             </el-dropdown-menu>
    23           </el-dropdown>
    24         </div>
    25         <div style="margin: auto 0px;" >
    26         <el-dropdown class="headerBarCls" @command="dropdownClick" :class="{ 'clickMenuNumTrue':clickMenuNum == 7}">
    27           <span class="el-dropdown-link">布控预警<i class="el-icon-arrow-down el-icon--right"></i></span>
    28           <el-dropdown-menu slot="dropdown">
    29             <el-dropdown-item>
    30               <router-link to="/home/dispGroup" >布控库管理</router-link>
    31             </el-dropdown-item> 
    32           </el-dropdown-menu>
    33         </el-dropdown>
    34       </div>
    35       </div>
    36     </el-col>

附加：

由于路由菜单组件pageRoutersBar是只渲染一次，因此需要用监听的方法进行处理。

1 <template>
     2   <div id="home">
     3     <div style="width: 100%;position: relative;" id="headerID" ref="headerID">
     4       
     5       <el-row>
     6         <pageRoutersBar></pageRoutersBar>
     7       </el-row>
     8       <el-row class="addressSearch" v-if="false">
     9         <addressSearch></addressSearch>
    10       </el-row>
    11     </div>
    12     <router-view></router-view>
    13   </div>
    14 </template>

转载于:https://www.cnblogs.com/luoxuemei/p/11350767.html

[1103120-20190814110647541-2079477218.png]: /images/20230601/415328338d5b4b3c94d3de266c255e72.png
[1103120-20190814111118180-1228381154.png]: /images/20230601/9387be8012d2497e99d4386807145dc9.png