vue2怎么通过监听路由变化给父级路由菜单添加样式

原创

小哥 3年前 (2022-10-21) 阅读数 106 #Web前端

文章标签 vue

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仅呈现一次，因此需要使用侦听方法来处理。

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