使用router-link跳转子页面之后，菜单激活样式不生效的解决

1.原样式父页面如下

 点击已完成会跳到子页面，跳到子页面之后就没有样式了

 

2.由于我的路由路径中都带有file，

所以我给渲染左边菜单的数组加了一个变量来判断是否保留激活样式

 

然后将router-link的代码改为如下：

   <router-link :to="obj.url" v-for="obj in pathArr" :key="obj.index"
          :class="{'router-link-exact-active active':activeUrl.indexOf(obj.active)>-1}">
          <li class=" side-nav-item flexList" v-if="role && role.indexOf(obj.type)>=0">
            <img :src="obj.icon" alt="" class="mr-2">
            <span>{{obj.name}} </span>
          </li>
        </router-link>

其中activeUrl为一个计算属性，用来获取当前页面

   computed: {
      activeUrl() {
        return this.$route.matched[1].path
      }
    },

 修改完成以后效果