Vue之栏父组件跳转子路由后当前导航active样式消失问题

举个栗子，导航栏如下图，当前新闻资讯的路由是：localhost:8083/#/new，导航栏样式如图所示：

随便挑个新闻点击后会跳转到子路由：localhost:8083/#/new/newDetail，这时候新闻资讯的主路由style样式出现消失的问题，如下图：

style代码：

.router-link-exact-active{
    color: #8fc526!important;
    border-top: 4px solid #8fc526!important;
  }

router.js代码：

{
      path: '/new',
      name: 'new',
      component: news,
      children: [
        {
          path: '/new/newDetail',
          name: 'newDetail',
          component: newsDetail
        }
      ]
    }

解决方案：
将style方案改成下面即可

.router-link-active{
    color: #8fc526!important;
    border-top: 4px solid #8fc526!important;
}

类名设置为router-link-active，即使是跳转到子路由也不会影响到主路由的样式问题