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

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

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监听路由变化:

    watch: {
'$route'(toRouter, fromRouter) {
this.doMemuActive(toRouter);
}
},
       doMemuActive(toRouter) {
if (toRouter && toRouter.meta && toRouter.meta.routerParent) {
if (toRouter.meta.routerParent == 'community') {
this.clickMenuNum = ;
} else if (toRouter.meta.routerParent == 'intel') {
this.clickMenuNum = ;
} else if (toRouter.meta.routerParent == 'disp') {
this.clickMenuNum = ;
} else {
this.clickMenuNum = -;
}
} else {
this.clickMenuNum = -;
}
},

  

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

 export const constantRouterMap = [
{path: '/home', component: _import('arcgisMap/home'), hidden: true,redirect: '/home/arcgisMap',
children: [
   {path: 'multipleQuery', component: _import('arcgisMap/multipleQuery'), hidden: true }, {path: 'communitySecurity', component: _import('arcgisMap/communitySecurity'), meta: { routerParent: 'community' }, hidden: true}, {path: 'IntelDigCtrl', component: _import('arcgisMap/IntelDigCtrl'), meta: { routerParent: 'intel' }, hidden: true },
{path: 'peerAnalysis', component: _import('arcgisMap/peerAnalysis'), meta: { routerParent: 'intel' }, hidden: true },
{path: 'dayInNightOut', component: _import('arcgisMap/dayInNightOut'), meta: { routerParent: 'intel' }, hidden: true },
{path: 'nightBehavior', component: _import('arcgisMap/nightBehavior'), meta: { routerParent: 'intel' }, hidden: true },
{path: 'frequentBehavior', component: _import('arcgisMap/frequentBehavior'), meta: { routerParent: 'intel' }, hidden: true },
{path: 'personWifiMergeAls', component: _import('arcgisMap/personWifiMergeAls'), meta: { routerParent: 'intel' }, hidden: true }, {path: 'dispGroup', component: _import('arcgisMap/dispositionModel/dispGroup/dispGroup'), meta: { routerParent: 'disp' }, hidden: true}, /*布控库管理*/
{path: 'dispTargetGroup', component: _import('arcgisMap/dispositionModel/dispTargetGroup/dispTargetGroup'), meta: { routerParent: 'disp' }, hidden: true}, /*布控库目标分组*/
{path: 'dispTarget', component: _import('arcgisMap/dispositionModel/dispTarget/dispTarget'), meta: { routerParent: 'disp' }, hidden: true}, /*布控目标管理*/
]
}]

  

  (c)、在菜单组件内部,定义一个clickMenuNum数据

  data(){
return{
clickMenuNum:-,
}
},

  

  (d)、在父级路由中,添加:class,用于判断是否需要添加路由活跃样式

 <el-col :span="" class="headerCenter flexClsNormal">
<div style="width: 100%;width: 100%;overflow-y: auto;text-align: center;height: 60px;">
<div><router-link to="/home/arcgisMap">首页</router-link></div>
<div><router-link to="/home/actualCensus">实有人口清查</router-link></div>
<div style="margin: auto 0px;" >
<el-dropdown class="headerBarCls" @command="dropdownClick" :class="{ 'clickMenuNumTrue':clickMenuNum==5}">
<span class="el-dropdown-link">社区管控<i class="el-icon-arrow-down el-icon--right"></i></span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="">
<router-link to="/home/communitySecurity" >社区治安一览表</router-link>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div style="margin: auto 0px;" >
<el-dropdown class="headerBarCls" @command="dropdownClick" :class="{ 'clickMenuNumTrue':clickMenuNum==6}">
<span class="el-dropdown-link">智能挖掘<i class="el-icon-arrow-down el-icon--right"></i></span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item command="">
<router-link to="/home/IntelDigCtrl" >人员档案</router-link>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
<div style="margin: auto 0px;" >
<el-dropdown class="headerBarCls" @command="dropdownClick" :class="{ 'clickMenuNumTrue':clickMenuNum == 7}">
<span class="el-dropdown-link">布控预警<i class="el-icon-arrow-down el-icon--right"></i></span>
<el-dropdown-menu slot="dropdown">
<el-dropdown-item>
<router-link to="/home/dispGroup" >布控库管理</router-link>
</el-dropdown-item>
</el-dropdown-menu>
</el-dropdown>
</div>
</div>
</el-col>

附加:

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

 <template>
<div id="home">
<div style="width: 100%;position: relative;" id="headerID" ref="headerID">
<!--顶部菜单-->
<el-row>
<pageRoutersBar></pageRoutersBar>
</el-row>
<el-row class="addressSearch" v-if="false">
<addressSearch></addressSearch>
</el-row>
</div>
<router-view></router-view>
</div>
</template>
上一篇:Android Studio 修改包名最便捷做法


下一篇:好记心不如烂笔头之JQuery学习,第三章