vue 中使用css modules如何解决js动态增加的类名

Question

下面是一段通过vue-cli生成的app.vue的组件,并用css modules 进行了修改

<template>
  <div :id="$styleB.app">
    <div :id="$styleB.nav" :class="$styleB.bg">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>
    <router-view/>
  </div>
</template>

<script>
  export default {
    created() {
      console.log(this.$styleB)
      //{bg: "App_bg_2d5i2", app: "App_app_7GWKZ", nav: "App_nav_32ReM", router-link-exact-active: "App_router-link-exact-active_25SP7"}
    }
  }
</script>
<style module="$styleA">

</style>


<style  module="$styleB" lang="scss" >
.bg {
  font-size: 14px;
  // background: rgb(83, 13, 13)
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
#nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.router-link-exact-active {
      color: #42b983;
    }
   }
}
</style>

这里的问题是 router-link-exact-active 类名是由js动态生成的,但是因为启用了 css modules 这里的类名被替换为 App_router-link-exact-active_25SP7 也就是针对这个状态的样式失效了

我试着把 router-link-exact-active 设置为global

#nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
    :global(&.router-link-exact-active) {
    color: #42b983;
    }
  }
}

这样 router-link-exact-active 类名虽然没有转化但是只能解析出

 #App_nav_32ReM a {
    font-weight: bold;
    color: #2c3e50;
}

并不能解析出 #App_nav_32ReM a.router-link-exact-active来
如果下面这样

#nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
    &.:global(router-link-exact-active) {
    color: #42b983;
    }
  }
}

编译会出错

然后我尝试把 router-link-exact-active 提取出来

#nav {
  padding: 30px;
  a {
    font-weight: bold;
    color: #2c3e50;
  }
}
:global {
  .router-link-exact-active {
    color: #42b983;
  }
}

这样却会产生一个问题 就是 #App_nav_32ReM a 的权重比 .router-link-exact-active 大
所以我又尝试下面的写法

:global {
  #nav a.router-link-exact-active {
    color: #42b983;
  }
}

不知道是不是因为 #nav 冲突问题这里的样式没有被解析出来

请问一下有什么办法在尽量少修改结构的情况下,让css过渡到使用 css modules, 又能解决这些由js动态插入的类名问题